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

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)：

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

二、该方法是一个 static 方法意味着这个方法是属于 React.Component 类的方法，因此方法内是没法使用 this 的，这就意味着没法使用 this.setState 来更新 state，因此这个方法直接经过返回对象的形式来更新 state，若是某些 props 的状况不须要更新 state，那么就返回 null 就好。实际上这个方法和 componentDidUpdate 搭配使用，就能覆盖 componentWillReceiveProps 的全部使用场景了

 

 

getSnapshotBeforeUpdate：

一、在更新以前获取组件的快照，在组件更新前触发

二、它的返回值会做为第三个参数传递给后面的 componentDidUpdate 参数中，和 componentDidUpdate 一块儿使用，能覆盖掉 componentWillUpdate 的全部使用场景了

 

 

componendDidCatch(error, info)

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

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