「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
4thステップ では、サード・ステップで開発した
CRUDサンプルのコンポーネント分割に取り組む。
コンポーネント分割 †
フォルダ †
下記コンポーネントのフォルダは分けても分けなくてもイイ。
ただ、ココのサンプルでは、
にフォルダを分ける。
タイミング †
アンチパターン †
手順１ †
Reactのサード・ステップの手順１のComponent分割を行う。
前提 †
- 子から親：
- →親のハンドラをthis.propsで子に渡し、
- →子からハンドラを呼び出す（引数指定可能）。
- →setState
- 親から子：
- →props（JSX Spread Attributes）にバインド
- →子に定義したcomponentWillReceiveProps?から
- →setStateメソッドを呼び出す。
- Component分割のサンプルとしては、コチラが参考になる。
トレードオフ †
- Component分割によって、再利用が可能になったり、見通しが良くなる。
- Reduxのように安易にグローバル化できないので、
「何の状態を、どのComponentにどの方向で連携するか？」
を事前によく検討して設計する必要がある。
- 方向を意識した変更通知の実装が必要になるので、実装難易度は上がる。
方針 †
ルートのComponent †
検討する。
- Reactでは、以下の様な設計書を起こすのが寛容か？
子のComponent †
子のComponentは以下の様に分割する。
- Input
入力となる<INPUT type="text">
- Output
出力となる
- Paragraphタグ
- Tableタグ
- <INPUT type="text">
モジュール化 †
１画面
みたいな。
※ Reduxと違って、イベントハンドラは分散する。
サンプルの実装 †
2020年4月、開示予定
手順２ †
Reactのサード・ステップの手順２のComponent分割を行う。
前提 †
- Containerから複数のComponentを呼び出すようなComponent分割も可能。
- Containerの分割（Container in Container）も可能らしいので、
ここでは、Containerを分割して、対応するComponentも分割する。
トレードオフ †
例えば、
- Containerで２つのComponent、ComponentAとComponentBを表示する場合...、
- Componentが増えていくとその分、必要なハンドラやプロパティが増える。
- mapStateToProps? と mapDispatchToProps? が肥大化してしまい見通しが悪くなる。
- しかし、全Componentを Containerにするとやり過ぎになるので適切な単位で分割する。
- データフェッチしていた箇所だけを元のContainerに残す。
- ComponentA、B に関するプロパティとハンドラをそれぞれ ContainerA、B に分割する。
など。
方針 †
ルートのContainer †
ルートのContainerには、
- mapStateToProps?, mapDispatchToProps?を定義ぜず、
- ComponentにConnectしない（Renderが動かなくなる）。
- DOMのRenderを実装する。
子のContainer †
- 技術的に、
子のContainerには、
- mapStateToProps?, mapDispatchToProps?を定義し、
- ComponentにConnectする。
- DOMのRenderを実装しない。
- Component側にDOMのRenderを実装する。
モジュール化 †
１画面
みたいな。
サンプルの実装 †
- Component分割によって、一部、Stateで運用していた所も、
mapStateToProps?メソッドを使用してProps化し、
Component間で状態の共有も容易に書くことが出来た。
参考 †
Qiita †
mizchi's blog †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
無題.png