react之生命周期

什么是生命周期？

1. 组件从创建到死亡它会经历一些特定的阶段。

2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

生命周期流程图(旧)

生命周期的三个阶段（旧）

初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()
​

更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
​

卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

生命周期流程图(新)

生命周期的三个阶段（新）

初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.getDerivedStateFromProps 
3.render()
4.componentDidMount()
​

更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()
​

卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

重要的勾子及应用场景

1.render：初始化渲染或更新渲染调用

2.componentDidMount：开启监听, 发送ajax请求

3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1.componentWillMount

2.componentWillReceiveProps

3.componentWillUpdate

需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。