はじめに
React公式ページの"Reactの流儀"を勉強したので備忘録を残します。
図解に挑戦してみました。きちんと図で表現するのは難しいですね。図にしてみると、文字だけで理解したような気になっていたものが炙り出されて色々な気づきがありました。
UI をコンポーネントに分割する
- モックアップのすべてのコンポーネントとサブコンポーネントを四角で囲んで、それぞれに名前を付けていく(単一責任の原則。１つのコンポーネントに一つの機能)
- コンポーネントを階層構造に整理する
Reactで静的なバージョンを作成する
- コンポーネントを作成していく際に、他のコンポーネントを再利用しつつprops(親から子にデータを渡す手段。関数に渡す引数のようなもの) 経由でそれらにデータを渡すようにする
- Don't use "state" yet! state はインタラクティビティ、つまり時間とともに変化するデータのためにあるもの
- 通常、シンプルな例ではトップダウンで作業する方が簡単であり、大規模なプロジェクトではボトムアップで進める方が簡単
UI の状態を最小限かつ完全に表現する方法を見つける
- UI をインタラクティブにするには、ユーザが背後にあるデータモデルを変更できるようにする必要がある。これにはstateというものを使用する
- state はコンポーネントのメモリのようなもの。コンポーネントが情報を追跡し、ユーザ操作に反応して変更できるようにする
- stateであるべきもの
- 記憶する必要がある
- 変化する
- 最小限のセットである（DRY（Don’t Repeat Yourself））
- stateでないもの
- 時間が経っても変わらないもの
- 親から props 経由で渡されるもの
- コンポーネント内にある既存の state や props に基づいて計算可能なもの
stateを保持すべき場所を特定する
- その state に基づき何かをレンダーする全てのコンポーネントを特定する
- 階層内でそれら全ての上に位置する、最も近い共通の親コンポーネントを見つける
- state をどこで保持すべきか決める
- 多くの場合、共通の親に直接置くことができる
- その共通の親のさらに上にあるコンポーネントに置くこともできる
- 適切なコンポーネントが見つからない場合は、state を保持するためだけの新しいコンポーネントを作成し、共通の親コンポーネントの階層の上のどこかに追加する
- 親コンポーネントは state として情報を保持し、その情報を子コンポーネントに props として渡す
逆方向のデータフローを追加する
- ユーザがフォームの内容を変更するたびに、state がそれらの変更を反映して更新されるようにするには、逆方向へのデータの流れ（子から親へ）をサポートする必要がある
- stateを持つコンポーネントのみがstateの値をセットする関数を呼び出すことができる。よって、フォームを持つコンポーネントがstateを更新できるようにするには、これらの関数を渡す必要がある
- フォームを持つコンポーネントの中にイベントハンドラを追加し、それから渡された関数を呼び出すことで、stateを設定する
参考