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