React生命周期

初始化阶段

组件的构造函数（constuctor）部分，继承React Component，在constructor中通过super(props)调用父类React Component的构造函数，才拥有了之后的生命周期。

constructor

在这个阶段，会获取到外层传递的props数据，这里进行组件初始化的工作，内部state的定义，和组件本身逻辑的初始化。

挂载阶段

componentWillMount

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

Render

组件的渲染阶段，props或state有更新的时候，如果没有在shouldComponentUpdate中禁止的话，会触发重新渲染，而DOM层的实际重绘过程是一个复杂的过程，这个过程React会通过虚拟DOM的方式和复杂算法进行处理。render函数是一个纯函数，它的返回只依赖传递的参数。这里不能进行state的更新处理，可能会导致无限循环。

componentDidMount

在组件被挂载到DOM上之后调用，只会调用一次，异步数据的获取工作在这里处理。

更新阶段

在父组件重新render或者传入的props或内部的state有更新时，都会进入更新阶段。

componentWillReceiveProps

• 在接受父组件改变后的props需要重新渲染组件时用到的比较多
• 接受一个参数nextProps
• 通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

shouldComponentUpdate

大量的数据更新会触发组件一遍又一遍的更新，会造成不小的性能损耗，这里就需要shouldComponentUpdate来进行优化工作，它有两个参数，nextProps和nextState，在这里通过传的更新后数据和当前数据this.props、this.state里的数据进行比对，可以筛选，哪些变化可以触发重绘，哪些就行拦截，如果拦截，return false。如果返回true，则先进行React elements比对，如果相同，则不会触发重绘，如果不同再进行绘制。

componentWillUpdate

这个方法会在render之前调用，可以处理一些更新前需要处理的工作。在React16之后会结合新生命周期getDerivedStateFromProps一起来处理props和state的同步问题。

render

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

componentDidUpdate

这个方法会在render之后调用，在这里可以操作更新后的组件DOM。

卸载阶段

componentWIllUnmount

在组件被卸载前调用，这里会处理一些数据清理、定时器清理等工作来避免内存泄露。