4.react生命周期

面试题

1、React中的生命周期有哪些？

constructor
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

2、React中组件第一次执行的时候会执行哪些生命周期函数

constructor
componentWillMount
render
componentDidMount

3、render函数什么时候会执行？

当this.state/this.props发生改变的时候

4、当this.props/this.state发生改变的时候会执行哪些生命周期

this.props
  componentWillReceiveProps
  shouldComponentUpdate
  componentWillUpdate
  render
  componentDidUpdate

this.state
   shouldComponentUpdate
   componentWillUpdate
   render
   componentDidUpdate

5、React中哪些生命周期会执行一次，哪些生命周期会执行多次

多次
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate
一次
   constructor
   componentWillMount
   componentDidMount
   componentWillUnmount

1、constructor:

1、组件的初始化，用来定义当前组件所需要的一些状态，状态定义在this.state中。
2、当前生命周期中必须书写super，否则this的指向会发生错误以及报错
3、在当前生命周期中默认是访问不到props属性的，如果想要进行访问必须在super以及constructor中添加参数props

2、componentWillMount:

挂载前：
1、可以进行前后端数据的请求(在服务端渲染的时候)
2、可以在数据第一次被渲染的时候做数据的更改
3、在当前生命周期中尽量不要调用this.setState因为当前生命周期函数执行完毕后，会自动执行render函数
4、可以将外部的数据转换为内部的数据

注意:当前生命周期在17.0中已经废除掉了

3、render：

1、当前生命周期用来进行数据与模板的结合
2、render函数第一次执行的时候会将渲染的数据在内存中保存一份，当第二次数据发生了改变后，render会将这次的虚拟DOM与缓存中的虚拟DOM进行对比这种对比叫做DIFF算法
3、只要this.state/this.props发生了改变那么render函数就会执行

4、componentDidMount：

挂载后：
1、当前生命周期我们可以做前后端数据的交互
2、可以在当前生命周期中获取到真实的DOM 通过this.refs来获取
3、一般情况下我们都在当前生命周期中做一些插件的实例化new Swiper('')

操作真实DOM的方式
ref="h2" this.refs.h2
ref={(el)=>{this.dom = el}} this.dom

5、 componentWillReceiveProps

1、当this.props发生改变的时候当前函数就会执行
2、当前函数中会有一个参数这个参数是一个新的props
3、在当前生命周期函数中我们可以对新的props做修改

注意：当前生命周期函数在17.0中废除掉了

6、shouldComponentUpdate

1、当this.state/this.props被修改的时候会执行当前生命周期函数
2、当前生命周期执行的时候必须返回一个true或者是false 返回值决定了render函数是否会执行，如果为true则render函数执行，false则render函数不会执行
3、如果返回值为true则下面的生命周期会执行，如果为false则下面的生命周期不会执行
4、当前生命周期特别重要，因为当前生命可以做React的性能优化,(根据比较新旧的state/props来进行对比)
5、当前生命周期函数中有2个参数一个是新的props 一个是新的state

shouldComponentUpdate(newProps,newState) {
        console.log("shouldComponentUpdate")

        // if(this.state.message == newState.message){
        //     return false;
        // }else{
        //     return true;
        // }
        return true;
    }

6、当期生命周期决定的是render函数是否执行，而不是数据是否修改

7、 componentWillUpdate

更新前：
1、在当前生命周期中我们可以对更新的数据做最后的修改
2、当前生命周期中有2个参数一个是新的props一个是新的state

8、 componentDidUpdate:

更新后
1、当前生命周期中我们可以获取到数据更新后最新的DOM结构
2、注意当前生命周期会执行多次，所以当你需要做业务逻辑操作的时候一定要判断

9、 componentWillUnmount:

卸载
1、当前生命周期执行的时候我们需要做事件的解绑
2、数据的移除等操作

最后编辑于：2019.06.13 21:22:42