Layoutコンポーネント
>@dan_abramov: top react skill to learn in 2023
何
コンポーネントの配置のみに責務を持つコンポーネント
この呼び方は正式名称ではなく
が概念化するために勝手にそう呼び始めた
propsバケツリレーによる密結合を防ぐ
追記: 2023/08/16
>コンポーネントの分類
> ロジックコンポーネント
> レイアウトコンポーネント
> ブロックコンポーネント
> インラインコンポーネント
>~
>ルート以外のレイアウトコンポーネントは基本的に width: 100%, height: 100%; margin: 0; padding: 0; box-sizing: border-box; で display: grid or display: flex。 grid 推奨
実装イメージ
RootがLayoutコンポーネントを配置するとして、
LayoutコンポーネントはReactNodeを活用する
ステレオタイプ > コントロール的な役割
Layoutコンポーネントはコンポーネント結合の橋渡し役になる
<UserList users={users} Item={(user) => <UserItem user={user}/>} /> 各コンポーネントのpropsの構造を作成する責務はLayoutの親
propsバケツリレーを程度解決できる
たとえば孫コンポーネントへのprops指定も、Layoutへ委譲できる
コンポーネントの共通結合を外部結合に引き上げる的な役割も担える
コンポーネントの配置とレイアウト及びスタイリングの分離
Tailwindの黒魔術もある程度閉じ込められる
関数型プログラミングっぽい感じにできる
Pipeline Operatorのように中間状態を排除して状態伝播したりとか
local reasoningしたりとか
副作用は最初と最後に寄せるを実現できるのが嬉しい
React Docsでも似たような説明があった気がする
---
コンポーネントを疎結合にする目的であればNavigation Stateを経由するという手もある
ちなみに、この責務をサーバー側に移したのがServer-Driven UI