.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

4thステップ では、サード・ステップで開発した
CRUDサンプルのコンポーネント分割に取り組む。

コンポーネント分割

フォルダ

下記コンポーネントのフォルダは分けても分けなくてもイイ。

ただ、ココのサンプルでは、

  • components
  • containers

にフォルダを分ける。

タイミング

アンチパターン

  • 多数のRenderXXX
  • コンポーネント分割中毒
  • propの展開し過ぎ

手順1

Reactのサード・ステップの手順1のComponent分割を行う。

前提

  • 子から親:
    • →親のハンドラをthis.propsで子に渡し、
    • →子からハンドラを呼び出す(引数指定可能)。
    • →setState
  • 親から子:
    • →props(JSX Spread Attributes)にバインド
    • →子に定義したcomponentWillReceiveProps?から
    • →setStateメソッドを呼び出す。
  • Component分割のサンプルとしては、コチラが参考になる。

トレードオフ

  • Component分割によって、再利用が可能になったり、見通しが良くなる。
  • Reduxのように安易にグローバル化できないので、
    「何の状態を、どのComponentにどの方向で連携するか?」
    を事前によく検討して設計する必要がある。
  • 方向を意識した変更通知の実装が必要になるので、実装難易度は上がる。

方針

ルートのComponent

  • ルートのComponentは、

検討する。

  • Reactでは、以下の様な設計書を起こすのが寛容か?
    概要図

子のComponent

子のComponentは以下の様に分割する。

  • DDL
    入力となるDropDownList?
  • Input
    入力となる<INPUT type="text">
  • Output
    出力となる
    • Paragraphタグ
    • Tableタグ
    • <INPUT type="text">
  • Button
    イベントハンドラ

モジュール化

1画面

  • 1ルートContainer
  • 複数の子
    • Container
    • Component

みたいな。

Reduxと違って、イベントハンドラは分散する。

サンプルの実装

2020年4月、開示予定

参考

手順2

Reactのサード・ステップの手順2のComponent分割を行う。

前提

  • Containerから複数のComponentを呼び出すようなComponent分割も可能。
  • Containerの分割(Container in Container)も可能らしいので、
    ここでは、Containerを分割して、対応するComponentも分割する。

トレードオフ

例えば、

  • Containerで2つの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を実装する。

モジュール化

1画面

  • 1ルートContainer
  • 複数の子
    • Container
    • Component
  • 1Action
  • 1Reducer

みたいな。

サンプルの実装

  • 2020年4月、開示予定
  • Component分割によって、一部、Stateで運用していた所も、
    mapStateToProps?メソッドを使用してProps化し、
    Component間で状態の共有も容易に書くことが出来た。

参考

参考

Component と Container

Qiita

mizchi's blog


添付ファイル: file無題.png 7件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-10-25 (金) 17:33:24 (17d)