コンポーネントのstate

コンポーネントにはprops以外にもstateと言う状態を持つ手段があります。

本講座ではstateless functionを基本としてコンポーネントを書くため、stateを使う機会は少ないことに加えて、最近ではredux等を使うとsingle storeでstateを管理することになり、コンポーネントレベルのstateは使わなくても済みます。

stateを使う場合

stateを使う方法を紹介します。いくつかの書き方がありますが、ES2015のclassを使う書き方を紹介します。

class Hello extends React.Component {
  constructor() {
    this.state = { count: 1 };
    this.incrementCount = this.incrementCount.bind(this);
  }
  incrementCount() {
    this.setState({ count: this.count + 1 });
  }
  render() {
    return (
      <div>
        Hello {this.props.name}
        <button onClick={this.incrementCount}>
          count={this.state.count}
        </button>
      </div>
    );
  }
}

react-compose-state

single storeを使う場合はコンポーネントレベルのstateを使うことは基本的にはありません。一方、個人プロジェクトなどの手軽なコーディングではsingle storeはオーバスペックである場合もあります。そのような場合でコンポーネントレベルのstateを使いつつ、上記のようなclassを使わない方法としてreact-compose-stateがあります。参考までにそれを使うと上記のコードは次のように書けます。

const Hello = composeWithState({ count: 1 })(({ name, count, setCount }) => (
  <div>
    Hello {name}
    <button onClick={() => setCount(count + 1)}>
      count={count}
    </button>
  </div>
);