React组件生命周期

所谓组件的生命周期就是一个组件装载，更新，卸载的过程。

装载： 组件第一次的加载，在这里完成组件的加载和初始化。

更新： 在组件运行和交互阶段完成的组件的更新。

卸载： 组件的消亡阶段，在这里完成一些组件的清理工作。

---

react组件周期图

---

装载（Mounting）

getInitialState:

在组建创建加载之前调用，用来初始化组件的state(在es6语法中，初始化state用this.state = {date:1}写在constructor中)。

componentWillMount:

该方法在render之前调用,因此在这个方法中设置state不会触发重新渲染，在整个生命周期中只会执行一次。

componentDidMount:

组件装载完成后立即被执行,这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。而且改变state将会触发重新渲染。

---

Updating（更新）

componentWillReceiveProps(nextProps):

输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。

componentWillReceiveProps: function(nextProps) {  
  this.setState({
    countIncreasing: nextProps.count > this.props.count
  });
}

shouldComponentUpdate:

shouldComponentUpdate(nextProps, nextState)

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。

默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

componentWillUpdate:

componentWillUpdate(nextProps, nextState)

在更新发生之前，使用这个方法可以作为执行准备更新的一个好机会。值得注意的是，这里不能调用 this.setState() 。

componentDidUpdate:

componentDidUpdate(prevProps, prevState)

该函数的执行时间是，组件更新完之后立即调用。由于这是组件已经更新完成，所以参数变成preProps和preState。

卸载（Unmount）

componentWillUnmount:

在一个组件被 卸载(unmounted) 和 销毁(destroyed) 之前立即被调用。 在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求等。