![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る --[[React]] -> [[Redux]] --[[Reactのファースト・ステップ]] --[[Reactのセカンド・ステップ]] --[[Reactのサード・ステップ]] --Reactの4thステップ --[[Reactの5thステップ]] *目次 [#bd2236cc] #contents *概要 [#a184b9fb] 4thステップ では、[[サード・ステップ>Reactのサード・ステップ]]で開発した~ CRUDサンプルの[[コンポーネント分割>#q259873b]]に取り組む。 *コンポーネント分割 [#q259873b] **フォルダ [#b3cb028e] 下記コンポーネントのフォルダは分けても分けなくてもイイ。 -[[Presentational Component>React#i7081aae]] -[[Container Component>React#x2578f6f]] ただ、ココのサンプルでは、 -components -containers にフォルダを分ける。 **タイミング [#pdcec503] -初めは[[Presentational Component>React#i7081aae]]だけを使用する。 -規模増加に伴い、段階的に、[[Container Component>React#x2578f6f]]を導入する。 **アンチパターン [#o995cd17] -多数のRenderXXX -コンポーネント分割中毒 -propの展開し過ぎ *手順１ [#l1074ab3] [[Reactのサード・ステップの手順１>Reactのサード・ステップ#i946770b]]のComponent分割を行う。 **前提 [#vc58d950] -[[データおよびイベント連携>React#n8b8bac0]]により実現する。 --子から親： ---→親のハンドラをthis.propsで子に渡し、 ---→子からハンドラを呼び出す（引数指定可能）。 ---→setState --親から子： ---→props（JSX Spread Attributes）にバインド ---→子に定義したcomponentWillReceivePropsから ---→setStateメソッドを呼び出す。 -Component分割のサンプルとしては、[[コチラ>Reactのファースト・ステップ#n908d0bb]]が参考になる。 **トレードオフ [#q46383fd] -Component分割によって、再利用が可能になったり、見通しが良くなる。 -[[Redux]]のように安易にグローバル化できないので、~ 「何の状態を、どのComponentにどの方向で連携するか？」~ を事前によく検討して設計する必要がある。 -方向を意識した変更通知の実装が必要になるので、実装難易度は上がる。 **方針 [#i1632b3b] ***ルートのComponent [#ue93a57d] -ルートのComponentは、 --[[子Component>#ge900513]]と --データを流す方向を >検討する。 -Reactでは、以下の様な設計書を起こすのが寛容か？ #ref(無題.png,left,nowrap,概要図,50%) ***子のComponent [#ge900513] 子のComponentは以下の様に分割する。 -DDL~ 入力となるDropDownList -Input~ 入力となる<INPUT type="text"> -Output~ 出力となる --Paragraphタグ --Tableタグ --<INPUT type="text"> -Button~ イベントハンドラ ***モジュール化 [#pd6dba31] １画面 -１ルートContainer -複数の子 --Container --Component みたいな。 ※ [[Redux]]と違って、イベントハンドラは分散する。 **サンプルの実装 [#i8f8b8cc] 2020年4月、開示予定 *手順２ [#l1074ab3] [[Reactのサード・ステップの手順２>Reactのサード・ステップ#j40c0c29]]のComponent分割を行う。 **前提 [#u8056ca5] -Containerから複数のComponentを呼び出すようなComponent分割も可能。 -Containerの分割（Container in Container）も可能らしいので、~ ここでは、Containerを分割して、対応するComponentも分割する。 **トレードオフ [#ka17c2b5] 例えば、 -Containerで２つのComponent、ComponentAとComponentBを表示する場合...、 --Componentが増えていくとその分、必要なハンドラやプロパティが増える。 --mapStateToProps と mapDispatchToProps が肥大化してしまい見通しが悪くなる。 -しかし、全Componentを Containerにするとやり過ぎになるので適切な単位で分割する。 --データフェッチしていた箇所だけを元のContainerに残す。 --ComponentA、B に関するプロパティとハンドラをそれぞれ ContainerA、B に分割する。 など。 **方針 [#ve1ccbd3] ***ルートのContainer [#v5fba64e] ルートのContainerには、 -mapStateToProps, mapDispatchToPropsを定義ぜず、 -ComponentにConnectしない（Renderが動かなくなる）。 -DOMのRenderを実装する。 ***子のContainer [#va48feb0] -[[手順１>#ge900513]]と同様に分割する。 -技術的に、~ 子のContainerには、 --mapStateToProps, mapDispatchToPropsを定義し、 --ComponentにConnectする。 --DOMのRenderを実装しない。 --Component側にDOMのRenderを実装する。 ***モジュール化 [#w7eb726d] １画面 -１ルートContainer -複数の子 --Container --Component -１Action -１Reducer みたいな。 **サンプルの実装 [#j638929e] -2020年4月、開示予定 -Component分割によって、一部、Stateで運用していた所も、~ mapStateToPropsメソッドを使用してProps化し、~ Component間で状態の共有も容易に書くことが出来た。 *参考 [#o7a18067] **[[Component と Container>React#m78a648c]] [#a34fc2d8] **Qiita [#t7dcac5f] -[[React/Redux約三年間書き続けたので知見を共有します | Enigmo Life>http://www.enigmo.co.jp/blog/tech/reactredux%E7%B4%84%E4%B8%89%E5%B9%B4%E9%96%93%E6%9B%B8%E3%81%8D%E7%B6%9A%E3%81%91%E3%81%9F%E3%81%AE%E3%81%A7%E7%9F%A5%E8%A6%8B%E3%82%92%E5%85%B1%E6%9C%89%E3%81%97%E3%81%BE%E3%81%99/]]~ -私のReactのコンポーネント実装アンチパターン~ https://qiita.com/seya/items/7a0d20da4de5fab14426 -メンテナブルな React Component を目指すための小技集~ https://qiita.com/terrierscript/items/372727448b58d4738018 **mizchi's blog [#q28e1f0c] -React Component 視点での~ アトミックデザインの解釈といくつかの疑問~ https://mizchi.hatenablog.com/entry/2018/06/07/203739 -Redux 再考~ https://mizchi.hatenablog.com/entry/2018/10/04/101308
