前回からの続きですが、このページだけ読んでも分かる内容になっています。今回読むReact公式ドキュメントは「state とライフサイクル」のページの最後のところです。
コンポーネント間で渡されるデータの性質を知ることで、Reactにおけるデータの取り扱いの作法への理解を深めましょう。
コンポーネント内で利用されるstateはローカルなもの
特定のコンポーネント内で利用されるstateは、そのコンポーネントの内側だけで利用されるローカルなものです。特定のコンポーネント内のstateに対して、他のコンポーネントからアクセスすることはできませんし、特定のコンポーネントがその内部でstateを利用しているかどうかを、他のコンポーネントから知ることはできません。
さらに言うなら、特定のコンポーネントが関数型かクラス型かということも、他のコンポーネントには関係のないことです。
stateの値を他のコンポーネントに渡す場合、propsとして渡す
特定のコンポーネントから他のコンポーネントに対して、stateの値を渡すことはできます。ただし、stateとして渡すのではなく、その時点でstateに入っていた値をpropsとして渡します。
以下のコードは、開発者が作ったFormattedDateという名称のコンポーネントに対してpropsとしてstateの値を渡しています。
<FormattedDate date={this.state.date} />stateの値を渡される側のコンポーネントは、上流のことは知る必要が無い
上記のコードで、stateの値を渡される側のFormattedDateコンポーネントは、渡されてきた値が何に由来してるのか分かりませんし、知る必要がありません。親コンポーネント内のstateの値に由来しているのかどうかは FormattedDateコンポーネントにとって関係のないことです。
FormattedDateコンポーネントからすると、親コンポーネントからpropsとしてdateの値が渡されたという以上のことは分かりませんし、FormattedDateコンポーネントとしてはそれで用が足りるのです。
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}まとめ
Reactアプリケーションでは、特定のコンポーネント内でstateを利用しているかどうかは、あくまでもそのコンポーネントの内部実装の問題です。他のコンポーネントにとっては関係のないことです。
特定のコンポーネント内で作成されたstateのデータは、下流のコンポーネントにのみ propsとして渡すことができ、それが再び上流のコンポーネントへstateとして戻されることはありません。
Reactコンポーネント間で渡されるデータは、上流から下流へ流れるだけです。このルールがReactから複雑さを排除して、考え方をシンプルに保つのに貢献しています。どこかオブジェクト指向プログラミングと似ているかもしれません。
次回へ続きます。
