React-组件生命周期

每个生物都有它自己的生命周期，从出生到少年，成年再到死亡，同理，组件也是有它特定的生命周期，React用不同的方法来描述它的整个生命周期。现在，要稍微修改一下组件的代码，当组件加载完毕1秒后，使liked的值自动加1.

......
componentDidMount(){
    setTimeout(()=<{
        this.likedCallback();
    },1000);
}
......

componentDidMount这个方法就是在render完成并且组建装载完成后调用方法，所以界面中首先显示0.1秒以后此方法被调用，界面被重新渲染，liked值直接变成1.

整个生命周期可以如下图表示：

---

1.组件首次加载（实例化）

• getDefaultprops：对于组件来说这个方法之后被调用一次，就是在装载之前被调用一次。

对于那些没有被父组件指定props属性的新建实例来说，这个方法返回的对象可用为实例默认的props值。其中赋值的数据会被设置到this.props中。

• getInitialState：对组件的每个实例来说，这个方法的调用次数，有且仅有一次，并且只会在装载之前调用一次。

在这里你将有机会初始化每一个实例state，与getDefault方法不同的是，每次实例创建时该方法都会被调用一次，且其函数的返回值会被设置到this.state中，需要注意的是，在ES6的写法中，只需写在constructor中即可：

class MyComponent extends React.Component{
    constructor(props){
        super(props);  //这里声明state
        this.state = {count:0};
    }
}

• conponentWillMount：该方法会在完成首次渲染之前被调用，这也是在render方法调用前可以修改组件state的最后一次机会。

• render：在这里会创建一个虚拟的DOM，用来表示组件的输出，对于一个组件来说，render是一个必须的方法，并且有特定的规则。render方法需要满足一下几点：

1.只能通过this.props和this.state来访问数据。
2.可以返回null，false或者任何React组件。
3.只能出现一个顶级组件（即不能返回一组元素）。
4.不能改变组件的状态或者修改其DOM输出。

render方法返回的结果不是真正的DOM，而是一个虚拟的表现。

• componentDidMount：在render方法成功调用并且真实的DOM已经被渲染之后，便可以在componentDidMount内部通过this.getDOMNode（）方法访问到它。
  这就是你可以用来访问原始DOM的生命周期钩子函数。当你想要测量渲染出DOM元素的高度，或者使用计时器来操作它，亦或运行一个自定义的jQuery插件时可以讲这些操作挂载在这个方法上。

  假设需要在一个通过React渲染出的表单元素上使用jQuery UI的Autocomplete插件，则可以这样使用：

  //需要自动补全的字符串列表
  var datasource = [...]；

  var MyComponent = React.createClass({
      render:function(){
          return <input ... />,
      },
      componentDidMount:function(){
          $(this.getDOMNode()).autocomplete({
              source:datasource
          });
      }
  })；

注意：
当React运行在服务端时，componentDidMount方法不会被调用。

2.组件props更新（存在期）

此时，组件已经渲染好，并且用户可以和他进行交互。通常是通过一次鼠标点击，触屏点击，或者键盘事件来触发一个事件处理器。随着用户改变了组件或者整个应用的state，便会有新的state流入组件树。当组件接收到新的state时，便会触发下面的一系列方法：

• componentWillReceiveProps：在任意时刻，组建的props都可以通过父组件来更改。出现这种情况时，componentWillReceiveProps方法会被调用，你也将获得更改props对象及更新state的机会。
  如下：

componentWillReceiveProps:function(nextProps){
    if(nextProps.checked!==undefined){
        this.setStated({
            cheack.nextProps.checked
        });
    }
}

• shouldComponentUpdate:通过调用shouldComponentUpdate方法在组件渲染的时候进行精确优化。
  如果你确定某个组件或者它的任何子组件不需要渲染新的props或者state，则方法或返回false。
  注意：

在首次渲染期间或者调用了forceUpdate方法后，这个方法便不会被调用。

返回false则是在告诉React要跳过调用render方法，以及位于render前后的钩子函数，componentWillUpdate和componentDidUpdate。

另一个关于性能优化的选项是React插件提供的PurRenderMixin方法。如果你的组件是纯净的，即对于相同的props和state，它总会渲染出一样的DoM，那么这个mixin会自动调用shouldComponentUpdate方法比较props和state，如果比较的结果一样那么就会返回false。

• componentWillUpdate：这个方法和componentWillMount方法类似，组件会在接受到新的props和state进行渲染之前，调用该方法。

注意，不可以在该方法中更新state或者props，而是应该借助componentWillReceiveProps方法在运行时更新state。

• componentDidUpdate：和componentDidMount方法类似，该方法给了我们更新已经渲染好的DOM发机会。

3.销毁期（组件的卸载）

每当React使用完一个组件，这个组件就必须从DOM中卸载最后被销毁，这时候，仅有的一个钩子函数就会做出响应，完成所有的清理和销毁工作，这一步是必须有的。

• componentWillUnmount：该方法会在组件被移除前被调用，这样就会有机会去做一些清理工作。

在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或者事件监听器等等。

最后，总结一下：

React生命周期方法提供了精心设计的钩子函数，会伴随组件的整个生命周期。和状态机类似，每个组件都被设计成能够在整个生命周期中输出稳定，语义化的标签。