React : コンポーネントの作成手順

React

React の 流儀

下記の流れでコンポーネントを作る

  1. デザインモックの UI を、コンポーネントに括るべき範囲に分解し、分解したコンポーネントを階層構造にならべる

    1. 単一のコンポーネントに括るべき範囲を決める
      • 単一責任原則
      • それぞれのコンポーネントが、データモデルの一部分だけを表現するように、UI を分割
        • 通常、UI と データモデル(JSON APIのレスポンス)は同じ構造を持つ
      • モックに枠線(コンポーネントに括る範囲)を引く
    2. 括ったコンポーネントを階層構造に落とし込む

  2. ロジックを持たない静的なコンポーネントを作成

    • データモデルを受け取って、UI の描画だけを行う
    • state を一切使わない

  3. UI を表現するために必要最小限の state(状態) を特定

    • state
      • 時間経過の中で変化し、算出する事もできないもの
    • state ではないもの
      • 親から props で与えられたデータ
      • 時間経過で変化しないデータ
      • コンポーネント内の他の props, state を使って算出可能なデータ

  4. 3 の state を、どのコンポーネントに、どの state を持たせるか決める

  5. 逆方向のデータフローを追加

上記の手順は下記に相当

  • 1, 2 => Presentational Component の設計
  • 3, 4, 5 => Container Components の設計

Presentational and Container Components パターン (デザインパターン)

ひとつのコンポーネントを下記の 2 つに分離

  • Presentation Component

    • 純粋に見た目だけを責務とする
    • 自らはロジックを持たず、見た目だけで完結
    • props は純粋に JSX で使うもののみ
    • => storybook に登録できるもの

  • Container Component

    • Presentation Component にロジックを追加するコンポーネント
    • Presentation Component をimportして Custom Hook とつなげる

Custom Hook

メリット

  • よりメンテナンスの高いコンポーネントを促される
    • 独立性が高い
    • 読みやすい
    • 再利用可能
    • テストしやすい