「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
通常、ラッピングのdivを除いて独自のDOMマークアップはもたない。スタイルはもってのほか
Presentational Componentまたその他のコンポーネントにデータと振る舞いを提供する
アクション呼び出しなどをコールバックとしてPresentational Componentに渡す
スタイルなどを持たないという点から、データソースとして機能する傾向があるため、基本的に状態保持と処理を行う
通常、React Reduxのconnect（）、RelayのcreateContainer （）、Flux UtilsのContainer.create（）などの上位コンポーネントを使用して生成される
コンポーネント分割 †
コンポーネントに関する理解を深める †
Presentational Component †
見た目を担当するコンポーネント
- 独自のマークアップとスタイルを持つ。
- アクションやストアに依存しないのでロジックの部分は分離される。
- 多くの場合
- this.props.childrenとして他に内包され、
- propsとしてデータとコールバックを受け取れる
- 稀に独自のstateを持つ（それはデータではなくUIの状態として持つ）
- 以下を必要としない限りはSFCとして記述する。
- state
- ライフサイクルフック
- パフォーマンスの効率化
Container Component †
- Container Componentsではロジック（物事の振る舞い）に関与。
手順４ †
- 手順２のコンポーネント分割を行う。
- Containerの分割（Container in Container）も可能である模様。
- 多分、サブ・コンポーネント化すればイケると思う。
トレードオフ †
- Containerで２つのコンポーネント、ComponentAとComponentBを表示
- コンポーネントが増えていくとその分必要なハンドラーやプロパティが増える。
- mapStateToProps? と mapDispatchToProps? が肥大化してしまい見通しが悪くなる。
- 全コンポーネントを connected にするとやり過ぎになるので適切な単位で分割する。
- データフェッチしていた箇所だけを元のContainerに残す。
- ComponentA、B に関するプロパティとハンドラーをそれぞれ ContainerA、B に分割
ポイント †
参考 †
参考 †
mizchi's blog †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
