this.stateとthis.propsの違い

Reactはコードをコンポーネントにパッケージ化し、通常のHTMLタグを挿入するようにコンポーネントを挿入し、ページにこのコンポーネントを挿入することができます.Reactの大きな革新は、コンポーネントを状態マシンとして見なし、最初に初期状態があり、その後、ユーザー間のインタラクションによって状態が変化し、レンダリングUIをトリガすることである.get Initial State方法は初期化に用いられ、初期状態、つまりオブジェクトを定義します.このオブジェクトは、this.state属性で読み込むことができます.ユーザーがコンポーネントをクリックすると、ステータスが変化します.this.set State方法はステータス値を修正します.毎回修正したら、自動的にthis.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>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

 this.propsとthis.stateはコンポーネントの特性を説明するために使用されるので、混淆が生じるかもしれません.簡単な区別方法としては、this.propsは、それらが一旦定義されると、もう変化しないという特性を表していますが、this.stateはユーザーのインタラクティブによって変化する特性です.

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);