react 新旧生命周期对比

旧版生命周期

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

1. constructor()                     构造器
2. componentWillMount()      组件将要挂载的钩子
3. render()
4. componentDidMount()      组件挂载完毕的钩子          ===常用

 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. shouldComponentUpdate()   控制组件更新的“阀门”
2. componentWillUpdate()        组件将要更新的钩子
3. render()
4. componentDidUpdate()       组件更新完毕的钩子

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

1. componentWillUnmount()  组件将要卸载的钩子             ===常用

      一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

新版生命周期

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

1. constructor()                                      构造器
2. getDerivedStateFromProps           若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
3. render()
4. componentDidMount()                      组件挂载完毕的钩子      ===常用

     一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. getDerivedStateFromProps      若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
2. shouldComponentUpdate()          控制组件更新的“阀门”
3. render()
4. getSnapshotBeforeUpdate         在更新之前获取快照
5. componentDidUpdate()                组件更新完毕的钩子

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

1. componentWillUnmount()               组件将要卸载的钩子       ===常用

      ​​​​​​​一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息