生命周期详解

2020.2.15

React16.3之后的生命周期主要包含三个阶段:

1. 组件加载阶段
2. 组件更新阶段
3. 组件卸载阶段

加载阶段

1. constructor()

加载的时候调用一次，可以初始化state,继承props等

2. static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法。

3. render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。

4. componentDidMount()

组件渲染之后调用，只调用一次。

更新阶段

1. static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法。

2. shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）。

3. render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。

4. getSnapshotBeforeUpdate(prevProps, prevState)

触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

5. componentDidUpdate()

组件加载时不调用，组件更新完成后调用.

卸载阶段

1. componentWillUnMount()

z组件卸载之后调用，只触发一次

错误处理

1. static getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

2. componentDidCatch(error，info)

任何一处的javascript报错会触发。

完整的生命周期图