2020-6-29

Container/Presentational Component

雑な技術メモ

概要

  • Presentational Component

    • 見た目に責任を持つ
    • データやコールバックはpropsとして受け取る
    • stateは自身の見た目に関わる物以外持たない
    • スタイルを持つ
  • Container Component

    • データに責任を持つ
    • データやコールバックをPresentationalComponentにprops経由で渡す
    • stateful
    • スタイルを持たない

カテゴリ分けの目的

  • コード分割の指針
  • テスタビリティの確保
    • テストを阻害するデータ操作をContainer Componentへ追いやることで、Presentational Componentのユニットテストを容易にする
      • じゃあContainer Componentは?って話に関してはContainer Componentに対してユニットテストをするのではなく、呼び出している関数に対してユニットテストをすればいい

Presentational内にContainerを入れることの是非

自分の結論として、「children等props経由」ならPresentational Component内にContainer Componentが存在しても良い。直書きはだめ。

なぜprops経由かと言うと、直書きしてしまうとPresentational ComponentがContainer Componentの機能を内包することになってしまい原則が崩れてしまうため。テストする時にもContainer Componentの存在が邪魔になってしまう。

DIのように、props経由で外部から注入するようにする。注入する箇所は更に外のContainer Componentとなる。