React生命周期以及关于17.0版本生命周期的改变

Posted 2022-01-07 rkpbk

React的生命周期：

constuctor:

1、组件的初始化，用来定义当前组件所需要的一些状态，状态定义在this.state中。

2、当前生命周期中必须书写super，否则this的指向会发生错误以及报错

3、在当前生命周期中默认是访问不到props属性的，如果想要进行访问必须在super以及constructor中添加参数props

componentWillMount:

  挂载前：

        1、可以进行前后端数据的请求(在服务端渲染的时候)

        2、可以在数据第一次被渲染的时候做数据的更改

        3、在当前生命周期中尽量不要调用this.setState因为当前生命周期函数执行完毕后，会自动执行render函数

        4、可以将外部的数据转换为内部的数据

 

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

render:

1、当前生命周期用来进行数据与模板的结合

    2、render函数第一次执行的时候会将渲染的数据在内存中保存一份，当第二次数据发生了改变后，render会将这次的虚拟DOM与缓存中的虚拟DOM进行对比 这种对比叫做DIFF算法

    3、只要this.state/this.props发生了改变那么render函数就会执行

componentDidMount:

挂载后：

        1、当前生命周期我们可以做前后端数据的交互

        2、可以在当前生命周期中获取到真实的DOM  通过this.refs来获取

        3、一般情况下我们都在当前生命周期中做一些插件的实例化

            new Swiper(‘‘)

     操作真实DOM的方式

         ref="h2"    this.refs.h2

         ref=(el)=>this.dom = el  this.dom

componentwillReceiveProps(newProps):

  1、当this.props发生改变的时候当前函数就会执行

    2、当前函数中会有一个参数 这个参数是一个新的props

    3、在当前生命周期函数中我们可以对新的props做修改

    4、当前生命周期函数在17.0中废除掉了

shouldComponentUpdate(newProps,newState):

  1、当this.state/this.props被修改的时候会执行当前生命周期函数

    2、当前生命周期执行的时候必须返回一个true或者是false 返回值决定了render函数是否会执行，如果为true则render函数执行false则render函数不会执行

    3、如果返回值为true则下面的生命周期会执行，如果为false则下面的生命周期不会执行

    4、当前生命周期特别重要，因为当前生命可以做React的性能优化,(根据比较新旧的state/props来进行对比)

    5、当前生命周期函数中有2个参数一个是新的props  一个是新的state

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

componentWillUpdate(newProps,newState):

 更新前：

        1、在当前生命周期中我们可以对更新的数据做最后的修改

        2、当前生命周期中有2个参数 一个是新的props一个是新的state

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

componentDidUpdate:

更新后

      1、当前生命周期中我们可以获取到数据更新后最新的DOM结构

      2、注意当前生命周期会执行多次，所以当你需要做业务逻辑操作的时候一定要判断

componentWillUnmount:

卸载

    1、当前生命周期执行的时候我们需要做事件的解绑

    2、数据的移除等操作

 

 

总结：

在第一次渲染时执行的周期函数有：

Constructor；componentWillMount；render；componentDidMount

当this.props/this.state发生改变的时候执行的生命周期：

this.props

        componentWillReceiveProps

        shouldComponentUpdate

        componentWillUpdate

        render

        componentDidUpdate

    this.state

        shouldComponentUpdate

        componentWillUpdate

        render

        componentDidUpdate

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

        多次

       componentWillReceiveProps;shouldComponentUpdate;componentWillUpdate

       render;componentDidUpdate

        一次

        constructor;componentWillMount;componentDidMount

        componentWillUnmount

 

在17版本中废除的生命周期有（componentWillMount，componentwillReceiveProps，componentWillUpdate），与之增加的生命周期有：

getDerivedStateFromProps(nextProps, prevState)：

1、根据传入的 props 来更新 state

2、该方法是一个 static 方法意味着这个方法是属于 React.Component 类的方法，所以方法内是无法使用 this 的，这就意味着无法使用 this.setState 来更新 state，所以这个方法直接通过返回对象的形式来更新 state，如果某些 props 的情况不需要更新 state，那么就返回 null 就好。实际上这个方法和 componentDidUpdate 搭配使用，就能覆盖 componentWillReceiveProps 的所有使用场景了

 

 

getSnapshotBeforeUpdate：

1、在更新之前获取组件的快照，在组件更新前触发

2、它的返回值会作为第三个参数传递给后面的 componentDidUpdate 参数中，和 componentDidUpdate 一起使用，能覆盖掉 componentWillUpdate 的所有使用场景了

 

 

componendDidCatch(error, info)

　　如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，

　　就像使用了try catch，不会将错误直接抛出了，保证应用的可用性)