React 组件的生命周期API和事件处理

一、简单记录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值是一种常规方法。