React学習ログ No.7

React公式ドキュメント学習メモ：Reactの流儀

参照元：React の流儀

1. 開発の基本ステップ（5つのステップ）

ReactでUIを構築する際の基本となる5つのステップを確認

1. UIをコンポーネントの階層に分割する
   • 単一責任の原則に基づき、UIを小さな部品に分割
2. 静的なバージョンを作成する
   • Stateは使わず、props経由でデータを受け渡し、単方向データフローを確立
3. UIの状態を最小限かつ完全に表現する方法を見つける
   • 真に必要なstateを特定
4. Stateをどこに置くべきか特定する
   • **ステートの持ち上げ（Lifting State Up）**を行う
5. 逆方向のデータフローを追加する
   • 子コンポーネントから親のStateを更新する仕組み（イベントハンドラをpropsとして渡す）を追加

---

2. 最小限のStateを特定するルール（ステップ 3）

Stateとして管理すべきは、「アプリが記憶する必要のある、変化するデータの最小限のセット」のみ

Stateではないデータを見極めるための3つの質問

データが以下のいずれかに該当する場合、それはStateではない

1. 時間が経っても変わらないか？
   • Yes → propsで渡すか、外部で管理する
2. 親から props 経由で渡されるか？
   • Yes → 親が所有しており、子でStateとして持つべきではない
3. 既存の State や props に基づいて計算可能か？
   • Yes → 絶対にStateではない。実行時に計算し、**DRY（Don't Repeat Yourself）**を徹底する

---

3. Stateの配置ルール：ステートの持ち上げ（ステップ 4）

Stateを特定したら、それを所有するコンポーネントを決定する

Stateを配置する場所を決めるロジック

1. 影響範囲の特定: そのStateの値に基づいてレンダリングを行う全てのコンポーネントを特定する
2. 共通の親の発見: 影響コンポーネント群の階層で、最も近い共通の親コンポーネントを見つける
3. Stateの配置: Stateをその共通の親に配置する

このルールに従うことで、Stateが分散することなく、データの流れが一元化される。Stateは、それを必要とする最も高い階層で管理されるべきである