组件内部数据:state

在前面提到的props是不可变的,props来自于父组件。每一个组件可以根据接受的props数据渲染自己一次,而this.state 是组件私有的状态数据,可以通过调用this.setState() 来改变它,每当状态更新之后,组件都会重新渲染自己。

初始化状态,getInitialState()在组建的生命周期中仅执行一次:

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中通过onClick={this.handleClick}的方式给组件绑定事件处理器(各种事件中如onClickonSubmit用于用户的点击和提交表单事件)。事件处理的具体内容放在handleClick()函数中,可以通过这种方式重新setState()一下状态数据。