Skip to content

DNET_React4thStep

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Reactの4thステップ

概要

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

コンポーネント分割

フォルダ

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

  • Presentational Component（React の「Component と Container」の該当節を参照）
  • Container Component（React の「Component と Container」の該当節を参照）

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

  • components
  • containers

にフォルダを分ける。

タイミング

  • 初めはPresentational Componentだけを使用する。

  • 規模増加に伴い、段階的に、Container Componentを導入する。

アンチパターン

  • 多数のRenderXXX

  • コンポーネント分割中毒

  • propの展開し過ぎ

手順１

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

前提（手順１）

  • データおよびイベント連携（React の該当節を参照）により実現する。

    • 子から親：

      • → 親のハンドラをthis.propsで子に渡し、
      • → 子からハンドラを呼び出す（引数指定可能）。
      • → setState

    • 親から子：

      • → props（JSX Spread Attributes）にバインド
      • → 子に定義したcomponentWillReceivePropsから
      • → setStateメソッドを呼び出す。

  • Component分割のサンプルとしては、Reactのファースト・ステップの「手順２」が参考になる。

トレードオフ（手順１）

  • Component分割によって、再利用が可能になったり、見通しが良くなる。

  • Reduxのように安易にグローバル化できないので、
    「何の状態を、どのComponentにどの方向で連携するか？」
    を事前によく検討して設計する必要がある。

  • 方向を意識した変更通知の実装が必要になるので、実装難易度は上がる。

方針（手順１）

ルートのComponent

  • ルートのComponentは、

    検討する。

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

概要図

子のComponent

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

  • DDL
    入力となるDropDownList

  • Input
    入力となる<INPUT type="text">

  • Output
    出力となる

    • Paragraphタグ
    • Tableタグ
    • <INPUT type="text">

  • Button
    イベントハンドラ

モジュール化（手順１）

１画面

  • １ルートContainer

  • 複数の子

    • Container
    • Component

みたいな。

※ 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

  • 手順１の「子のComponent」と同様に分割する。

  • 技術的に、
    子のContainerには、

    • mapStateToProps, mapDispatchToPropsを定義し、
    • ComponentにConnectする。
    • DOMのRenderを実装しない。
    • Component側にDOMのRenderを実装する。

モジュール化（手順２）

１画面

  • １ルートContainer

  • 複数の子

    • Container
    • Component

  • １Action

  • １Reducer

みたいな。

サンプルの実装（手順２）

  • 2020年4月、開示予定

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

参考

Component と Container（参考）

React の「Component と Container」の該当節を参照。

Qiita

mizchi's blog

移行メモ

  • 「mapStateToProps, mapDispatchToPropsを定義ぜず、」→「定義せず、」に修正した。
  • 元 Wiki では「手順１」と「手順２」の見出しに同じアンカ（#l1074ab3）が 振られており、「子のContainer」からの「手順１」参照は実際には 「子のComponent」を指していたため、そちらへのリンクとした。
  • 同名の見出し（「前提」「トレードオフ」「方針」「モジュール化」 「サンプルの実装」「Component と Container」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, React, Redux, 4thステップ, コンポーネント分割, Presentational Component, Container Component

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally