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 のコードでは、text と onClick が Button コンポーネントに渡される Props です。
<Button text="click me" onClick={ this.clickHandler } />
Props は不変のデータとして扱われ、getDefaultProps で定義されたデフォルト値か、親コンポーネントから渡された値のどちらかを持つことになります。
State と Props の使い分け
コンポーネントは必要に応じて内部の State を自由に使用できますが、良い UI 体験のために、直接外部の State に接続する場合には Props で受け取るべきです。