标签：
一、简单记录React的组件的简洁的生命周期API：
A：实例化期：
一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同。
实例第一次被创建时会调用getDefaultProps，而后续实例创建时不会调用这个方法。
实例被创建时，依次被调用的API有：
getDefaultProps：
实例第一次被创建时才调用，对于组件类来说，它只调用一次。
这个方法返回的对象可为实例设置默认的props值。
getInitialState：
对于每个实例来说，这个方法只调用一次。每次创建实例时执行一次。
在这里初始化每个实例的state，在这里可以访问到this.props。
componentWillMount：
在首次渲染之前被调用，在渲染之前更改组件state的最后机会。
render：
组件的唯一必需方法。创建虚拟DOM，表示组件输出。
只能通过this.props和this.state访问数据。
可以return null，return false，或return 任何React组件。
只能有一个顶级组件。
不能改变组件状态，或修改DOM的输出。
（注，render返回的结果说虚拟DOM，React随后会把它和真实DOM做对比，来判断是否有必要做出修改）
componentDidMount：
render成功调用并且真实DOM也已经被渲染后，这个方法会调用。
在这里可以通过this.getDOMNode()方法访问真实的DOM。
例如需要测量DOM元素的宽度和高度等属性，可以在这个方法里做。
（注，React跑在Server端时，componentDidMount不会被调用）
B：存在期：
随着应用状态的改变，以下API依次被调用：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
C：销毁期：
组件被用完后，以下API被调用，给实例清理自身：
componentWillUnmount
注意反模式：
在getInitialState方法里，通过this.props来创建state的方法是一种反模式！
React专注于维护数据的单一来源，当组件的state值和它所基于的prop不同步时，是一种反模式！
反模式例子：
getDefaultProps: function() {
return { date: new Date() }
};
getInitialState: function() {
return {
day: this.props.date.getDay() // 不要在这里计算
}
};
render: function() {
return <div>Day is: {this.state.day}</div>;
};
正确的模式应该是在渲染时计算：（保证计算后的值不会与派生出它的props值不同步）
getDefaultProps: function() {
return { date: new Date() }
};
render: function() {
var day = this.props.date.getDay(); // 在渲染时做计算是正确的
return <div>Day is: {day}</div>;
};
注意，组件可以用this.props访问props，但不能修改自己的props！
关于state：
每个组件都有自己的state。state和props区别在于state只存在于组件内部。
state用来确定一个元素的视图状态。
state可以用setState或replaceState来修改。（不能用this.state来修改state）
只要setState或replaceState被调用，render就会被调用。如果render返回值有变化，DOM就会被更新。
二、React的事件处理：
事件文档：http://facebook.github.io/react/docs/events.html
绑定一个事件处理器：
React.DOM.button({className:"btn", onClick: this.handleSendClick}, "Send");
触控事件需要调用这个方法来手动启动：React.initializeTouchEvents(true);
更新组件状态会触发组件重绘。
setState会更新某一个state属性，而replaceState会替换掉整个state对象。
在绑定的事件处理器里做setState：
getInitialState: function() {
return { title: "Title 1.0" }
};
handlePageOnload: function(ev) {
this.setState({title: "Title 2.0"});
ev.preventDefault(); // 非必需，视情况而定
};
小结：更改state只能用setState或replaceState，因为它们可以通知React重绘DOM，即调用render方法。
补充：关于处理input的onChange事件：
handleComplete: function(event) {
this.callMethodOnProps("onCompleted", event.target.value);
};
render: function() {
return <textarea onBlur="{this.handleComplete}"></textarea>
};
注意，使用event.target.value获取input值是一种常规方法。
标签：
原文地址：http://www.cnblogs.com/alex1128/p/react-api-event.html
