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") }

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