Reactの4thステップ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[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#x2...
**アンチパターン [#o995cd17]
-多数のRenderXXX
-コンポーネント分割中毒
-propの展開し過ぎ
*手順1 [#l1074ab3]
[[Reactのサード・ステップの手順1>Reactのサード・ステップ...
**前提 [#vc58d950]
-[[データおよびイベント連携>React#n8b8bac0]]により実現す...
--子から親:
---→親のハンドラをthis.propsで子に渡し、
---→子からハンドラを呼び出す(引数指定可能)。
---→setState
--親から子:
---→props(JSX Spread Attributes)にバインド
---→子に定義したcomponentWillReceivePropsから
---→setStateメソッドを呼び出す。
-Component分割のサンプルとしては、[[コチラ>Reactのファー...
**トレードオフ [#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]
1画面
-1ルートContainer
-複数の子
--Container
--Component
みたいな。
※ [[Redux]]と違って、イベントハンドラは分散する。
**サンプルの実装 [#i8f8b8cc]
2020年4月、開示予定
*手順2 [#l1074ab3]
[[Reactのサード・ステップの手順2>Reactのサード・ステップ...
**前提 [#u8056ca5]
-Containerから複数のComponentを呼び出すようなComponent分...
-Containerの分割(Container in Container)も可能らしいの...
ここでは、Containerを分割して、対応するComponentも分割す...
**トレードオフ [#ka17c2b5]
例えば、
-Containerで2つのComponent、ComponentAとComponentBを表示...
--Componentが増えていくとその分、必要なハンドラやプロパテ...
--mapStateToProps と mapDispatchToProps が肥大化してしま...
-しかし、全Componentを Containerにするとやり過ぎになるの...
--データフェッチしていた箇所だけを元のContainerに残す。
--ComponentA、B に関するプロパティとハンドラをそれぞれ Co...
など。
**方針 [#ve1ccbd3]
***ルートのContainer [#v5fba64e]
ルートのContainerには、
-mapStateToProps, mapDispatchToPropsを定義ぜず、
-ComponentにConnectしない(Renderが動かなくなる)。
-DOMのRenderを実装する。
***子のContainer [#va48feb0]
-[[手順1>#ge900513]]と同様に分割する。
-技術的に、~
子のContainerには、
--mapStateToProps, mapDispatchToPropsを定義し、
--ComponentにConnectする。
--DOMのRenderを実装しない。
--Component側にDOMのRenderを実装する。
***モジュール化 [#w7eb726d]
1画面
-1ルートContainer
-複数の子
--Container
--Component
-1Action
-1Reducer
みたいな。
**サンプルの実装 [#j638929e]
-2020年4月、開示予定
-Component分割によって、一部、Stateで運用していた所も、~
mapStateToPropsメソッドを使用してProps化し、~
Component間で状態の共有も容易に書くことが出来た。
*参考 [#o7a18067]
**[[Component と Container>React#m78a648c]] [#a34fc2d8]
**Qiita [#t7dcac5f]
-[[React/Redux約三年間書き続けたので知見を共有します | En...
-私の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
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[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#x2...
**アンチパターン [#o995cd17]
-多数のRenderXXX
-コンポーネント分割中毒
-propの展開し過ぎ
*手順1 [#l1074ab3]
[[Reactのサード・ステップの手順1>Reactのサード・ステップ...
**前提 [#vc58d950]
-[[データおよびイベント連携>React#n8b8bac0]]により実現す...
--子から親:
---→親のハンドラをthis.propsで子に渡し、
---→子からハンドラを呼び出す(引数指定可能)。
---→setState
--親から子:
---→props(JSX Spread Attributes)にバインド
---→子に定義したcomponentWillReceivePropsから
---→setStateメソッドを呼び出す。
-Component分割のサンプルとしては、[[コチラ>Reactのファー...
**トレードオフ [#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]
1画面
-1ルートContainer
-複数の子
--Container
--Component
みたいな。
※ [[Redux]]と違って、イベントハンドラは分散する。
**サンプルの実装 [#i8f8b8cc]
2020年4月、開示予定
*手順2 [#l1074ab3]
[[Reactのサード・ステップの手順2>Reactのサード・ステップ...
**前提 [#u8056ca5]
-Containerから複数のComponentを呼び出すようなComponent分...
-Containerの分割(Container in Container)も可能らしいの...
ここでは、Containerを分割して、対応するComponentも分割す...
**トレードオフ [#ka17c2b5]
例えば、
-Containerで2つのComponent、ComponentAとComponentBを表示...
--Componentが増えていくとその分、必要なハンドラやプロパテ...
--mapStateToProps と mapDispatchToProps が肥大化してしま...
-しかし、全Componentを Containerにするとやり過ぎになるの...
--データフェッチしていた箇所だけを元のContainerに残す。
--ComponentA、B に関するプロパティとハンドラをそれぞれ Co...
など。
**方針 [#ve1ccbd3]
***ルートのContainer [#v5fba64e]
ルートのContainerには、
-mapStateToProps, mapDispatchToPropsを定義ぜず、
-ComponentにConnectしない(Renderが動かなくなる)。
-DOMのRenderを実装する。
***子のContainer [#va48feb0]
-[[手順1>#ge900513]]と同様に分割する。
-技術的に、~
子のContainerには、
--mapStateToProps, mapDispatchToPropsを定義し、
--ComponentにConnectする。
--DOMのRenderを実装しない。
--Component側にDOMのRenderを実装する。
***モジュール化 [#w7eb726d]
1画面
-1ルートContainer
-複数の子
--Container
--Component
-1Action
-1Reducer
みたいな。
**サンプルの実装 [#j638929e]
-2020年4月、開示予定
-Component分割によって、一部、Stateで運用していた所も、~
mapStateToPropsメソッドを使用してProps化し、~
Component間で状態の共有も容易に書くことが出来た。
*参考 [#o7a18067]
**[[Component と Container>React#m78a648c]] [#a34fc2d8]
**Qiita [#t7dcac5f]
-[[React/Redux約三年間書き続けたので知見を共有します | En...
-私の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
ページ名: