帮你理清React的生命周期

这是一个从 印记中文 | react官方文档 提取总结的，算是帮本身理清而且强化记忆 React的生命周期，以便之后编写组件的时候可以有更清晰的思路。 本文若有纰漏，欢迎指正

总体上来说，React生命周期分为了 挂载（装配） 、 更新 、 卸载 以及 捕错 四个状态阶段。每种状态里须要执行若干个生命周期函数，这些函数可能会在不一样的阶段里从新被调用。

用流程图来形象地概括总结以下：

挂载（装配）

这些方法会在组件实例建立和插入DOM中时被调用

1.constructor()

构造函数会在装配前调用。

constructor(props){
    //...
}

2.static getDerivedStateFromProps()

组件实例化后和接受新属性时调用，返回一个对象以更新状态，或返回null代表不须要更新状态

static getDerivedStateFromProps(nextProps,prevState)

3.componentWillMount()/UNSAFE_componentWillMount()

[UNSAFE_]componentWillMount()：装配前马上调用，发生在render()以前

17版前，这一辈子命周期函数名字均可以写为 componentWillMount()

4.render()

必须的钩子函数，不该该改变组件的状态，且不与浏览器交互

5.componentDidMount()

componentDidMount()：组件装配后马上调用，实现远端网络请求的地方

更新

属性或状态发生改变后，会触发一次更新，组件从新渲染，下述方法会被调用。

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

在挂载了的组件接收到新属性前调用。推荐使用getDerivedStateFromProps生命周期而不是该函数。

UNSAFE_componentWillReceiveProps(nextProps)

2. static getDerivedStateFromProps()

见挂载章节该钩子

3. shouldComponentUpdate()

在挂载了的组件属性变化和状态变化时调用。经过控制返回的boolean值告诉React是否从新渲染该组件。

没法控制子组件的从新渲染与否

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

当接收到新属性或状态时，UNSAFE_componentWillUpdate()在渲染前被当即调用

UNSAFE_componentWillUpdate(nextProps, nextState)

注意

若shouldComponentUpdate()返回false，UNSAFE_componentWillUpdate()将不会被调用。

5. render()

见挂载章节该钩子

6. getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染输出提交给DOM前将会当即调用。它让你的组件能在当前的值可能要改变前得到它们。这一辈子命周期返回的任何值将会做为参数被传递给componentDidUpdate()。

getSnapshotBeforeUpdate(prevProps, prevState)

7. componentDidUpdate()

在更新发生后当即被调用。适合发送请求的地方

componentDidUpdate(prevProps, prevState)

卸载

1. componentWillUnmount()

componentWillUnmount()在组件被卸载和销毁以前马上调用。能够在该方法里处理任何须要的清理工做，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节建立的DOM元素。

错误处理

1. componentDidCatch()

错误边界捕捉发生在子组件树中任意地方的JavaScript错误,一个错误边界并不能捕捉它本身内部的错误。

componentDidCatch(error, info)