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")
}
结合图示思路会更加清晰了