react 生命周期-2

React生命周期中的Updation阶段,也就是组件发生改变的更新阶段，这是React生命周期中比较复杂的一部分，它有两个基本部分组成，一个是props属性改变，一个是state状态改变（这个在生命周期的图片中可以清楚的看到）。

16.4之后版本声明周期图，

图纸来源：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

componentWillReceiveProps 函数

写在顶层组件没有接收props属性是不执行的 ，要写在接收props属性的组件中
子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
组件第一次存在于dom中，函数不会执行 第一次渲染
如果已经存在dom中，函数再会执行(第二次发生变化)
16.4之前版本

    componentWillReceiveProps(){
        console.log("componentWillReceiveProps")
    }

16.4之后版本 挂载跟 父组件更新都会触发此 生命周期

    static getDerivedStateFromProps(props, state){
        // 
        console.log(props,state)
        return state;
    }

下面是组件的state或者props 改变 触发的生命周期

shouldComponentUpdate

版本跟新前后无变化
函数会在组件更新之前，自动被执行，会在render 渲染之前执行
它要求返回一个布尔类型的结果，必须有返回值，false 下面的代码就不再执行

    shouldComponentUpdate(nextProps, nextState){
        console.log(1,'shouldComponentUpdate');
        return true; 
    }

即将更新组件,shouldComponentUpdate之后 执行

16.4以前版本

    componentWillUpdate(){
        console.log('componentWillUpdate')
//     true/false 同上  
        return true
    }

16.4以后版本

    UNSAFE_componentWillUpdate(nextProps, nextState){
        console.log(2,"即将更新组件");
    }

render 这里不再解释，使用render必须要带上的

完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，不过还有修改文档，你可以在这里去获取更新之前的文档

16.4之前无此声明周期

    getSnapshotBeforeUpdate(prevProps, prevState){ 
        console.log(4,'getSnapshotBeforeUpdate');
        return 123;
    }

更新完成之后 render之后 执行的函数

无版本变化

   componentDidUpdate(){
      console.log('5-componentDidUpdate')
   }

组件被删除/卸载之前 执行

    componentWillUnmount(){
        console.log("componentWillUnmount")
    }

结合图示思路会更加清晰了