9_react生命周期函数

1. 16.3 声明周期函数图

2. react16.3 和 16.4 生命周期差异：

• 在 16.3 中，只有当 props 改变时，会触发 getDerivedStateFromProps 方法。
• 在 16.4 中，当 props/state/forceUpdate() 时，都会触发 getDerivedStateFromProps 方法

3.常用生命周期和用途

生命周期函数	用途
constructor()	初始化本地状态this.state、绑定事件
render()	render()函数应该是纯函数，这意味着它不会修改组件状态
componentDidMount()	组件（插入树中）后立即调用。 发送异步请求获取数据，启动定时器。改变 state 后，不会立刻拿到新数据。
componentWillUnmount()	在卸载和销毁组件之前立即调用。清除计时器，取消网络请求、取消订阅。
componentDidUpdate()	在组件完成更新后立即调用。在初始化时不会被调用。改变 state 后，立刻拿到新数据，相当于 vue 中的$nextTick()。如果 shouldComponentUpdate()返回 false，该方法将不会被调用。
shouldComponentUpdate()	props 的值没有变化时，不用重新渲染子组件
getSnapshotBeforeUpdate()	render 执行之后，此时虚拟 DOM 生成了，但是还没有渲染到页面上，可以拿到之前 DOM 的一些数据内容，必须要跟 componentDidUpdate() 一起使用。保存滚动条的位置。

4.具体场景触发的生命周期

• 在创建组件实例并将其插入 DOM 时，将按以下顺序调用这些方法：

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

• 更新中，更新可能是由于props或state的更改引起的。重新渲染组件时，将按以下顺序调用这些方法：

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

• 正在卸载，从 DOM 中删除组件时，将调用此方法：

1. componentWillUnmount()

• 错误处理，在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

1. static getDerivedStateFromError()
2. componentDidCatch()

5. 废弃（仍可使用）的生命周期函数

生命周期函数	描述
componentWillMount()	在渲染前调用，使用componentDidMount()替代
componentWillReceiveProps()	在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。使用componentDidUpdate()替代
componentWillUpdate()	在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。使用componentDidUpdate()替代
render时**被调用。在初始化时不会被调用。使用componentDidUpdate()替代