react.js
React

React における State と Props の違い

More than 1 year has passed since last update.

State と Props の違いと、使い分けについて。ほぼこちらの日本語訳です。


State と Props

React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。

この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。


  • State: そのコンポーネントが持っている状態

  • Props: 親コンポーネントから渡されたプロパティ


State (状態)


  • mutable data (可変のデータ)

  • maintained by component (コンポーネントによって保持)

  • can change it (変更可)

  • should be considered private (プライベートであるべき)

State は可変のデータです。State の変更は、仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法となっています。

State はコンポーネント自体によって保持され、コンポーネントからコンポーネントへは渡されません。

State は、UI に関連した状態(ドロップダウンが開いているか閉じているかなど)、または、外部のデータに関連する状態(現在ログインしているユーザの名前など)のいずれかになりえます。(この辺日本語訳あやしい...)

State の値は、this.setState()をコンポーネント内で呼び出すことによって更新されます。これが呼び出されると、既存の State を新しい State で置き換えられ、そしてコンポーネントのrender()メソッドが実行されます。


Props (プロパティ)


  • immutable data (不変のデータ)

  • passed in from parent (親から渡される)

  • can't change it (変更不可)

  • can be defaulted & validated (デフォルト値の設定と検証が可能)

Props は、一般的に、親コンポーネントから子コンポーネントに渡される値です。

次の JSX のコードでは、textonClick が Button コンポーネントに渡される Props です。

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

Props は不変のデータとして扱われ、getDefaultProps で定義されたデフォルト値か、親コンポーネントから渡された値のどちらかを持つことになります。


State と Props の使い分け

コンポーネントは必要に応じて内部の State を自由に使用できますが、良い UI 体験のために、直接外部の State に接続する場合には Props で受け取るべきです。