1. 前言

React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，可分成三个状态：

挂载时(Mounting)：已插入真实 DOM
更新时(Updating)：正在被重新渲染
卸载时(Unmounting)：已移出真实 DOM

在下面的生命周期图中，常用的生命周期方法标记为粗体。

2. react生命周期图

react16.3版本生命周期图：
React 生命周期
react16.3和16.4生命周期差异：

生命周期方法	描述
render()	该方法是类组件中`必须需要`的方法。改变`state`/`props`或者`forceUpdate()`后，render都会被重新执行。render()函数应该是纯函数，这意味着它`不会修改组件状态`，它在每次调用时都返回相同的结果，并且不与浏览器直接交互。
constructor()	该构造函数在挂载之前被调用。它仅用于两个目的：`初始化本地状态this.state`、·`绑定事件`。
componentDidMount()	组件（插入树中）后立即调用。可以在这个方法中发送AJAX请求、读取数据。改变state后，`不会`立刻拿到新数据，相当于vue中的mounted()
componentDidUpdate()	在`组件完成更新后`立即调用。在初始化时不会被调用。改变state后，`可以`立刻拿到新数据，相当于vue中的$nextTick()。如果shouldComponentUpdate()返回false，该方法将不会被调用。
componentWillUnmount()	在`卸载和销毁组件之前`立即调用。使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除在中创建的所有订阅componentDidMount()。

生命周期方法	描述
shouldComponentUpdate(nextProps, nextState)	返回一个布尔值。在组件接收到新的props或者state时被调用。返回`false`的话，当`props`或者`state`发生变化，`不会`执行`render()`；在初始化时或者使用forceUpdate时不被调用。用来做性能优化，可以在你确认不需要更新组件时使用。
static getDerivedStateFromProps(props, state)	`最早`可以拿到父组件参数的钩子函数。返回一个新的`state`，或者返回`null`则不更新任何内容。在16.3和16.4中，有差异
getSnapshotBeforeUpdate()	在更新DOM之前，render执行之后，此时虚拟DOM生成了，但是还没有渲染到页面上，可以拿到之前DOM的一些数据内容，必须要跟componentDidUpdate() 一起使用，应用场景：保存`滚动条`的位置
pureComponent()	新版本中对getSnapshotBeforeUpdate钩子的优化，会`动态`判断`state`有没有变化，有变化就执行`render`，没有变化就不执行render
static getDerivedStateFromError(error)	后代组件引发错误后，将调用此生命周期。在“渲染”阶段调用。它接收作为参数抛出的错误，并且应返回一个值以更新状态。
componentDidCatch(error, info)	后代组件引发错误后，将调用此生命周期。在“提交”阶段调用，应用于记录错误等内容。

下面的生命周期方法标记为“旧版”。它们仍然有效，但是不建议在新代码中使用它们。

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

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

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

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

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