React生命周期函数

生命周期函数主要分为三个阶段

1. 创建阶段：是组件第一次渲染阶段，在这里完成了组件的初始化和加载。
2. 运行阶段：是组件在运行和交互阶段，这个阶段组件可以处理用户交互，或者接收事件更新界面，以及因父组件的重新渲染而造成的变化；
3. 销毁阶段：是组件卸载消亡的阶段，这里做一些组件的清理工作。例：清除：定时器、网络请求、事件监听等。

生命周期函数	调用次数	能否使用setState
getDefaultProps	1	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	是
componentWillUnmount	1	否

创建阶段

getDefaultProps和getInitialState

getDefaultProps 不是获取默认props，而是设置默认props，getInitialState 不是获取默认State，而是设置初始的state，主要是用在ES5的React写法中。分别定义this.props默认值和this.state初始值的阶段； 该方法只会被调用一次

componentWillMount

准备第一次加载组件时会调用 componentWillMount，组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state，也是render前最后一次修改state的机会。

render

渲染页面也是react最重要的步骤，创建虚拟dom进行diff算法，更新dom树在此进行。这里不能使用setState，否则有可能引起死循环。

componentDidMount

在组件第一次渲染过时会调用 componentDidMount ，通知组件已经加载完成。可以使用refs来获取dom节点、数据请求、调用setState等。

更新阶段

componentWillReceiveProps

该方法接受一个参数 nextProps ，当父组件向子组件传值的时候改变了props的值时触发的函数，当前 nextProps 就是父组件传给子组件的值。在这个回调函数里面，可以根据属性的变化，通过调用 setState 来更新组件状态，在这里调用更新状态是安全的，不会触发额外的 render 调用。

shouldComponentUpdate

该函数接受两个参数（nextProps，nextState），当组件接收到新的属性和状态，都会触发调用 shouldComponentUpdate，参数 nextProps表示下一个props的值，如果 nextProps 没有数据显示空。nextState 则表示下一个state的值。这个函数的返回值决定是否需要更新组件，我们可以在此对比前后两个props和state是否相同。相同的属性状态一定会生成相同的dom树，为了不浪费性能，直接返回false阻止更新。这样就不需要创造新的dom树和旧的dom树进行diff算法对比，能有效提高大量性能。如果 true 表示需要更新，继续走后面的更新流程。默认情况下，这个函数永远返回 true 保证数据变化的时候 UI 能同步更新。

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate 返回为 true ，就会开始准备更新组件，调用 componentWillUpdate。在这个回调中，可以做一些在更新界面之前要做的事情。特别注意的是，在这个函数里面不能使用 setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render 来更新界面。

componentDidUpdate

当 render 更新界面之后，会调用 componentDidUpdate，该函数内我们虽可以调用 setState 进行修改状态，建议不要轻易在此调用，以免造成死循环。

更新阶段小结

数据更新第一步先调用 shouldComponentUpdate 确认是否要更新数据，当这个函数返回值为true的时候才会进行更新，并且这个函数接受两个参数 nextProps 和 nextState，nextProps 是父组件传给子组件的值，nextState 表示下一个state的值，这两个值可以在函数中获取到。第二步当确认更新数据后 componentWillUpdate 将要更新数据，第三步 render，数据发生改变 render 重新渲染。第四步是 componentDidUpdate 数据更新完成。

销毁阶段

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount。在这个函数中可以做一些组件相关的清理工作，例如取消计时器、网络请求等。