React的生命周期---新版

何为生命周期

vue中也有生命周期，就是组件从诞生到销毁所经的一系列过程，被称为生命周期。在这些过程中有着对应的钩子函数，在钩子函数中开发者可以注入代码，使组件在生命周期的相应阶段执行所需的逻辑功能。

---

仅讨论类组件的生命周期，因为函数式组件每次调用都是重新运行函数，立刻销毁旧组件
生命周期以16.0.0版本为界限有了比较多的改动，所以以此分为新旧两版生命周期

旧版生命周期（React < 16.0.0）

示意图如下：

1. constructor

组件最早调用的生命周期函数，这个阶段可以看成“组件的灵魂即将投胎”的时期，尚且是一张纯净的、一无所有的白纸，可以在这个阶段进行一些初始化操作，例如state的初始化。
constructor在组件的生命中只会调用一次，后续更新到销毁都不会再次调用。
值得注意的点是不可以在constructor中使用setState，因为状态更新会重新渲染组件，然而在这个阶段组件尚未挂载到真实dom中，会有一系列的问题。

2. componentWillMount

组件即将被挂载阶段，正常情况只允许一次，但是会有不正常情况，因此不建议在这里面使用setState

3. render

render返回的是一个虚拟DOM，这个虚拟DOM最终会被渲染到真实的DOM当中，这个函数运行在组件即将渲染的时候，因此不止一次运行，每次重新渲染都会调用到，所以不可以使用setState，会造成无限递归。

4. componentDidMount

组件完成初次渲染并且挂载到真实DOM之后的生命周期，在这个时刻由于已经挂载完毕，是可以使用setState的，一些网络请求、计时器也可以在此阶段进行，至于为什么不在之前进行，是因为这些操作都有一定的“延迟”，会出现页面加载的空白期。
这个周期也只会执行一次。

5. componentWillReceiveProps

组件在即将接收到新的属性时会触发的钩子函数，参数是新的属性对象，可能会有一些异常bug

6. shouldComponentUpdate

组件即将更新时触发，函数两个参数分别是新的属性与新的state，这个时候我们可以根据新属性与新状态进行判断，人为干涉组件是否进行更新，操作为返回true是更新，false为不更新，不对此函数进行定义的话默认是返回的true，状态修改组件更新。

7. componentWillUpdate

组件即将被渲染，emmmm目前没用到过

8. componentDidUpdate

组件渲染完毕，如果需要对dom进行一些附加改动可以在此阶段进行

9. componentWillUnmount

组件销毁前夕阶段，在之前阶段所定义的计时器之类的占用资源的操作，在此可以销毁，在组件销毁之前可以将其销毁