react应用文档

组件生命周期

一个组件类必须由调用 React.createClass 建立，而且提供一个 render 方法以及其余可选的生命周期函数、组件相关的事件或方法定义。

一个简单的例子：

var LikeButton = React.createClass({
    getInitialState: function() {        return {liked: false};
    },
    handleClick: function(event) {        this.setState({liked: !this.state.liked});
    },
    render: function() {        var text = this.state.liked ? 'like' : 'haven\'t liked';        return (            <p onClick={this.handleClick}>
                You {text} this. Click to toggle.            </p>
        );
    }
});
React.render(    <LikeButton />,
    document.getElementById('example')
);

getInitialState

初始化 this.state 的值，只在组件装载以前调用一次。

getDefaultProps

只在组件建立时调用一次并缓存返回的对象（即在 React.createClass 以后就会调用）。

由于这个方法在实例初始化以前调用，因此在这个方法里面不能依赖 this 获取到这个组件的实例。

在组件装载以后，这个方法缓存的结果会用来保证访问 this.props 的属性时，当这个属性没有在父组件中传入（在这个组件的 JSX 属性里设置），也老是有值的。

render

必须

组装生成这个组件的 HTML 结构（使用原生 HTML 标签或者子组件），也能够返回 null 或者 false，这时候 React 会将组件生成一个 <noscript> 标签，而且 this.getDOMNode() 会返回 null。

生命周期函数

装载组件

componentWillMount

只会在装载以前调用一次，在 render 以前调用，你能够在这个方法里面调用 setState 改变状态，而且不会致使额外调用一次 render

componentDidMount

只会在装载完成以后调用一次，在 render 以后调用，从这里开始能够经过 this.getDOMNode() 获取到组件的 DOM 节点。

更新组件状态

这些方法不会在首次 render 组件的周期调用

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• componentDidUpdate

卸载（删除）组件

• componentWillUnmount

更多关于组件相关的方法说明，参见：

• Component Specs

• Component Lifecycle

• Component API