官方文档学习

（一）生命周期（旧）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生命周期。