React生命周期

React组件的生命周期(life cycle)根据广义定义描述，可以分为挂载，渲染和卸载这几个阶段，当渲染后的组件需要更新时，我们会重新渲染组件，这个阶段可能重复多次，直至卸载。
因此我们将React生命周期分为两类
- 当组件在挂载或卸载时
- 当组件接收新的数据时，即组件更新时

挂载或卸载过程

组件的挂载是最基本过程，这个过程主要做组件状态的初始化，我们推荐以下面的例子为模板写初始化组件

   import React, { Component, PropTypes } from 'react';
   class App extends Component {
      static propTypes = {
          // 定义props的类型
      };
      static defaultProps = {
          // 定义默认的props
      };
      constructor(props) {
          super(props);
          this.state = {
              // ...
          };
      }
      componentWillMount() {
          // 初始化只执行一次
          // 在render之前，不能通过refs拿节点
      }
      componentDidMount() {
          // 初始化只执行一次
          // 在render之后，可以通过refs拿到渲染后的节点，做一些我们想要的处理
      }
   }

我们看到propTypes和defaultProps被声明为静态属性，意味者从类外面也可以访问他们：App.propTypes和App.defaultProps。
如果在componentWillMount中执行setState方法，组件会更新state，但是只执行一次，所以初始化的state都可以放在这里。
如果在componentDidMount中执行setState方法，组件会重新渲染，但是这就相当于render之后再次render，这并不是一件好事，但是有些应用场景中，比如计算组件的位置或宽高时，就不得不让组件先渲染，更新必要的信息后再次渲染。
组件卸载非常简单，只有componentWillUnmount这一个卸载前状态:

   import React, { Component, PropTypes } from 'react';
   class App extends Component {
      componentWillUnmount(){
         //进行一些清理方法，如事件回收或者清除定时器
      }
      render(){
         return <div>...</div>;
      }
   }

数据更新过程

更新过程指的是父组件向下传递props或组件自身执行setState方法时一系列更新动作。这里只体现更新过程的生命周期

   import React, { Component, PropTypes } from 'react';
   class App extends Component {
      componentWillReceiveProps(nextProps) {
          // this.setState({})触发 shouldComponentUpdate
          // 如果没有在这里更新状态，那么不会重新渲染
      }
      shouldComponentUpdate(nextProps, nextState) {
          // return true
          // 接受新的state和props，如果不想重新渲染可以return false
      }
      componentWillUpdate(nextProps, nextState) {
          // ...
      }
      componentDidUpdate(prevProps, prevState) {
      }
      render(){
         return <div>...</div>;
      }

如果组件自身的state更新了，那么会依次执行shouldComponentUpdate，componentWillUpdate，render和componentDidUpdate