React：state と props の違い

React

『state, props って同じようにデータを持つようだけど何が違う 🤔』となってしまったので調査。Component Best Practices | React at Preactを参考にしました。

  • state

    • 変更可能なデータ(mutable)
    • 変更があると、仮想 DOM との差分を取り、ブラウザ DOM を更新し、再レンダリングする
    • state はコンポーネント自体に保持され、コンポーネント間でデータ間授受されない。コンポーネントは子コンポーネントに props として自身の state を渡してもよい
    • 状態には次のものがある
      • UI に関連するに内部状態（ドロップダウンが開いているか閉じているか）
      • データに関する外部状態（現在ログインしているユーザの名前）

    • データ更新は this.setState() を用いる。呼び出すと既存の状態が更新されたのち、render() が呼ばれる

      image.png React lifecycle methods diagram

  • props

    • 不変なデータ（immutable）
    • 次のいずれかの値を持つ
      • getDefaultProps で定義されたデフォルト値
      • 親コンポーネントから受け継がれた値

    text と onClick が Button コンポーネントに渡される props の JSX コード例：

  <Button text="click me" onClick={ this.clickHandler } />

コンポーネントは内部の state を自由に使用できるが、直接外部 の state に接続する場合には、props を用いるべき。