生命周期一共分三段：初始化，运行中，销毁。按照顺序：
初始化
getDefaultProps():Object
全局只会调用一次，为当前类生成的默认props，会被父组件传入的同名props覆盖。
getInitialState():Object
为当前组件生成最初的state，此时可以访问this.props
componentWillMount
mount直译为挂载，就是组件在页面中有对应的DOM。
render
严格意义上render不是一个生命周期环节，它只是一个生成虚拟DOM的方法。需要返回一个虚拟DOM树或者null。
componentDidMount
组件已经被挂载DOM，生成了this.refs，也是初始化中唯一可以发ajax的环节。
整个初始化阶段结束。
运行中
运行中就是组件（挂载）在页面上的阶段。当组件自己setState或者父辈容器setState之后会触发一次update。
componentWillReceiveProps(newProps):void
- 父组件
update后会render出一个本组件的新虚拟DOM -
React将新虚拟DOM的props，赋值给本组件的this.props - 在赋值之前先调用本方法，参数是新的
props
主要用于更新由props派生的state，这种情况下本环节就 很重要 ，比如以userId为参数的头像组件：
var Avatar = React.createClass({
getInitialState:function(){
return {
avatar_url:''
};
},
componentDidMount:function(){
var self = this;
this.avatarAjax = $.get('/get_avatar/',{
id:this.props.id
},function(url){
self.avatarAjax = null;
this.setState({
avatar_url:url
});
});
},
componentWillReceiveProps:function(newProps){
if(newProps.id!==this.props.id){
if(this.avatarAjax){
this.avatarAjax.abort();
}
this.avatarAjax = $.get('/get_avatar/',{
id:this.props.id
},function(url){
self.avatarAjax = null;
this.setState({
avatar_url:url
});
});
}
},
render:function(){
return _('image',{
src:this.state.avatar_url
},null);
}
});
优化：
var Avatar = React.createClass({
getInitialState:function(){
return {
avatar_url:''
};
},
componentDidMount:function(){
this.update(this.props);
},
componentWillReceiveProps:function(newProps){
if(newProps.id!==this.props.id){
this.update(newProps);
}
},
render:function(){
return _('image',{
src:this.state.avatar_url
},null);
},
update:function(props){
var self = this;
$.get('/get_avatar/',{
id:props.id
},function(url){
self.avatarAjax = null;
this.setState({
avatar_url:url
});
});
},
});
shouldComponentUpdate():bool
主要用于性能优化，初期可以不必理会。用于告诉React对于本次update，本组件不需要重新update。
componentWillUpdate
render
componentDidUpdate
一次更新结束。
销毁阶段
componentWillUnmount
销毁只有这一个环节，组件unmount后就销毁了，将不再重新mount到其他DOM上。
var i = 0;
var content = document.getElementById('content');
var Item = React.createClass({
getInitialState:function(){
// 赋予对象 id
if(!this.itemId){
this.itemId = ++i;
}
console.log('initState: '+ this.itemId);
return {};
},
componentWillReceiveProps:function(newProps){
if(this.props.id!==newProps.id)
console.log(this.props.id,newProps.id);
},
render:function(){
return _('div',null,this.props.id);
},
componentWillUnmount:function(){
console.log('unmount: '+this.itemId);
}
});
var List = React.createClass({
componentWillUnmount:function(){
console.log('list unmount');
},
render:function(){
return _('div',null,
this.props.data.map(function(id,i){
return _(Item,{
key:i,
id:id
});
}
));
}
});
ReactDOM.render(_(List,{data:[1,2,3]}),content);
setTimeout(function() {
ReactDOM.render(_(List,{data:[1,2]}),content);
setTimeout(function() {
ReactDOM.render(_(List,{data:[1,2,3]}),content);
}, 10);
}, 10);
/* 输出为
initState: 1
initState: 2
initState: 3
unmount: 3
initState: 4
*/
这个阶段主要用来解绑已经绑定的事件，取消发出的异步请求（timeout，ajax等）。防止setState被再次调用，并释放内存。
头像组件示例：
var Avatar = React.createClass({
getInitialState:function(){
return {
avatar_url:''
};
},
componentDidMount:function(){
this.update(this.props);
},
componentWillReceiveProps:function(newProps){
if(newProps.id!==this.props.id){
this.update(newProps);
}
},
render:function(){
return _('image',{
src:this.state.avatar_url
},null);
},
componentWillUnmount:function(){
if(self.avatarAjax){
self.avatarAjax.abort();
self.avatarAjax = null;
}
},
update:function(props){
var self = this;
if(this.avatarAjax){
this.avatarAjax.abort();
}
this.avatarAjax = $.get('/get_avatar/',{
id:props.id
},function(url){
self.avatarAjax = null;
this.setState({
avatar_url:url
});
});
},
});