「React入門」の前回はPropsついて解説を行いました。

今回はPropsのように状態を管理するStateについて解説を行います。

Stateとはコンポーネント利用時に設定ができる値で、Propsと違い後から変更ができます。

基本的にはコンポーネントの作成時にconstructorメソッド内でthis.stateオブジェクトに値を指定しておくことで、他のメソッドからthis.stateとして取得することが可能です。

//コンポーネントの作成
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState1 : 'foo01',
      myState2 : 'foo02'
    };
  }
  render() {
    return (
      <div>myState1 : {this.state.myState1} myState2 : {this.state.myState2}</div>
    )
  }
};
 //コンポーネントの描画
ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

Propsの内容をStateに反映させたい場合は、constructorメソッドでは引数としてPropsを受け取ることができるので受け取った引数をそのままstateに代入することでStateの初期値としてPropsの内容を利用することができます。

//コンポーネントの作成
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState : props.myProp
    };
  }

  render() {
    return (
      <div>myState : {this.state.myState}</div>
    )
  }
};

//コンポーネントの描画
ReactDOM.render(
  <MyComponent myProp="マイプロップ"/>,
  document.getElementById('app')
)

StateはsetStateメソッドで更新を行うことができ、即座にrenderメソッドで描画されているHTMLに反映されます。
以下のサンプルでは1秒ごとにStateを更新するスクリプトを実行しており、Stateが変更されたタイミングで変更した内容がHTMLに反映されます。

//コンポーネントの作成
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState : 1
    };
    //1秒ごとにStateを更新する
    setInterval(()=>{
      this.setState({
        myState : this.state.myState + 1
      });
    },1000);
  }

  render() {
    return (
      <div>myState : {this.state.myState}</div>
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

ReactではStateが変更されたタイミングでコンポーネントの再描画を行うので、UI変更に不要なプロパティはStateではなくPropsで管理したほうがよいでしょう。

次回はReactのイベントについて解説を行ないます。