電子文書(法令、タイムビジネス関連制度)2019-12-27Reactの5thステップ2019-12-20WWWブラウザの[×]ボタンのイベントをハンドルする。.NET開発基盤部会」によって運営されています。サード・ステップで開発したCRUDサンプルのコンポーネント分割に取り組む。下記コンポーネントのフォルダは分けても分けなくてもイイ。Componentただ、ココのサンプルでは、componentscontainersにフォルダを分ける。Componentだけを使用する。Componentを導入する。†Reactのサード・ステップの手順1のComponent分割を行う。†データおよびイベント連携により実現する。→子からハンドラを呼び出す(引数指定可能)。Attributes)にバインド→子に定義したcomponentWillReceiveProps?から→setStateメソッドを呼び出す。Component分割のサンプルとしては、コチラが参考になる。†Component分割によって、再利用が可能になったり、見通しが良くなる。「何の状態を、どのComponentにどの方向で連携するか?」を事前によく検討して設計する必要がある。方向を意識した変更通知の実装が必要になるので、実装難易度は上がる。子Componentとデータを流す方向を検討する。子のComponentは以下の様に分割する。†1画面1ルートContainer複数の子ContainerComponentみたいな。Reduxと違って、イベントハンドラは分散する。†Reactのサード・ステップの手順2のComponent分割を行う。†Containerから複数のComponentを呼び出すようなComponent分割も可能。Container)も可能らしいので、ここでは、Containerを分割して、対応するComponentも分割する。Containerで2つのComponent、ComponentAとComponentBを表示する場合...、Componentが増えていくとその分、必要なハンドラやプロパティが増える。肥大化してしまい見通しが悪くなる。Containerにするとやり過ぎになるので適切な単位で分割する。データフェッチしていた箇所だけを元のContainerに残す。