React生命周期

在创建React组件时，可声明一些函数，并让他们在组件的生命周期中的某些特定时间点被调用。了解每一个组件生命周期函数所扮演的角色以及它们的顺序，将让你可以在一个组件被创建或销魂时执行特定的操作。同时你还可根据需要去响应props或state的变化。

此外，了解有关组件生命周期函数的知识，对于进行性能优化和在Flux架构中组织组件是必需的。

一、加载阶段（Mounting）

在挂载阶段中被调用的生命周期函数

componentWillMount：被调用一次，在初始渲染之前立即被调用。在这个阶段设置state不会触发重新渲染。

componentDidMount：被调用一次，在初始渲染之后立即被调用。在生命周期的这个时间点，组件有了一个可被访问的DOM内容（这样对于数据获取操作而言是很用的。）

二、卸载阶段（Unmounting）

在卸载阶段中被调用的生命周期函数

在一个组件被DOM中卸载时被立即调用。当你需要进行一些清理操作，例如移除在加载阶段定义的时间侦听计时器，就可以利用此函数。

三、props更改

在一个组件的props更改时被调用的生命周期函数

componentWillReceiveProps：当一个组件接收到新的props时被调用。在这个函数中调用this.setState()不会触发一次额外的渲染。

shouldComponentUpdate：shouldComponentUpdate是一个特别的函数，它会在render函数之前被调用，在这个函数里面可以定义是否需要进行一次渲染，或者还是说这次渲染可以被跳过。这个函数对于性能优化而言很有用。

componentWillUpdate：当接收到新的props或者state而进行渲染之前，此函数被立即调用。在这个函数中不允许通过this.setState对state进行任何更改，它只能严格地用于准备即将开始的渲染，而不能自己再去触发一次更新。

componentDidUpdate：在组件的更新被刷新到DOM之后，就被立即调用。

四、state更改

在一个组件的state更改时被调用的生命周期函数

shouldComponentUpdate：state更改基本上会触发和props更改相同的那些生命周期函数，只有一个例外：没有对应于componentWillReceiveProps的函数。一个传入props的转换操作可能会导致state的更改，但反之则不然。如果你需要在state更改时执行操作，使用shouldComponentUpdate函数。

 

一张图看懂react组件生命周期

参考：《深入浅出react和redux》