react组件生命周期

下图详细列述了 React 组件在整个生命周期中所涉及的方法和行为：

react.png

生命周期详解

组件在整个 ReactJS 的生命周期中，主要会经历这4个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段。下面对各个阶段分别进行介绍。

1. 创建阶段

• 该阶段主要发生在创建组件类的时候，即调用 React.createClass时触发
• 这个阶段只会触发一个 getDefaultProps方法，该方法返回一个对象并缓存起来。然后与父组件指定的 props 对象合并，最后赋值给 this.props 作为该组件的默认属性
• getDefaultProps 方法，只在组件创建时调用一次

2. 实例化阶段
（1）getInitialState：初始化组件的state 的值。其返回值会赋值给组件的 this.state 属性
（2）componentWillMount：根据业务逻辑来对state进行相应的操作。只会在装载之前调用一次，在 render 之前调用
（3）componentDidMount：

• 对根据虚拟 DOM 结构而生的真实 DOM进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点，然后就可以像 Web 开发中那样操作里面的DOM元素
• 只会在装载完成之后调用一次，在 render 之后调用

3. 更新阶段
（1）componentWillReceiveProps：当组件接收到新的 props时，会触发该函数。在改函数中，通常可以调用 this.setState 方法来完成对 state 的修改
（2）shouldComponentUpdate：该方法用来拦截新的 props或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定
（3）componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作
（4）componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做一 DOM 操作

4. 销毁阶段

• 这个阶段只会触发一个叫 componentWillUnmount 的方法。
• 当组件需要从 DOM 中移除的时候，我们通常会做一些取消事件绑定、移除虚拟DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

---

调用顺序及次数

getDefaultProps()，调用1次
getInitialState()，调用1次
componentWillMount()，调用1次
render()，调用>=1次
componentDidMount()：仅客户端，调用1次
componentWillReceiveProps(object nextProps)，调用>=0次
ShouldComponentUpdate(object nextProps, object nextState)，调用>=0次
componentWillUpdate(object nextProps, object nextState)，调用>=0次
render()，调用>=1次
componentDidUpdate(object prevProps, object prevState)，调用>=0次
componentWillUnmount()，调用1次

示例代码点击这里

---

参考资料：

http://www.hangge.com/blog/cache/detail_1473.html#
http://lib.csdn.net/article/reactnative/43548
https://hulufei.gitbooks.io/react-tutorial/component-lifecycle.html
http://pinggod.com/2015/React-%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/
https://segmentfault.com/a/1190000005161417