官方文档学习

发布时间 2023-11-15 15:45:07作者: 半亩花田i
(一)生命周期(旧)v16.8.4(黄色底纹的新版本加UNSAFE_前缀)
1、初始化阶段:由ReactDOM.render()触发----初次渲染
constructor()
componentWillMount():组件将要挂载 。
componentDidMount():组件挂载完毕
PS:一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息。
2、更新阶段:由组件内部this.setSate()或父组件render触发
componentWillReceiveProps():组件将要接收新的props ---->组件第一次不进此钩子函数,第二次更新才进。
shouldComponentUpdate():控制组件更新的“阀门”
componentWillUpdate():组件将要更新
render()
componentDidUpdate():组件更新完毕
3、卸载组件:由ReactDOM.unmountComponentAtNode()触发
componentWillUnMount():组件将要卸载
PS:一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息。
 
(二)生命周期(新)
1、初始化阶段:由ReactDOM.render()触发----初次渲染
constructor()
getDerivedStateFromProps():若state的值任何时候都取决于props,那么可以使用该钩子。
render()
componentDidMount():组件挂载完毕
PS:一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息。
2、更新阶段:由组件内部this.sertSate()或父组件重新render触发
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate:在更新之前获取快照。
componentDidUpdate()
3、卸载组件:由ReactDOM.unmountComponentAtNode()触发
componentWillUnMount:组件将要卸载
 
组件强制更新:this.forceUpdate();
react新生命周期和旧生命周期的区别:废弃componentWillMount、componentWillReceiveProps、componentWillUpdate生命周期,新增getDerivedStateFromProps、getSnapshotBeforeUpdate生命周期。