Edited at

ComponentとContainerについて


はじめに

react-reduxでコンポーネントとコンテナーの扱いにどういう違いがあるのかがよくわかっていなかったので、今回それぞれの違いについてまとめることで、react-reduxを使いこなせるようにしたいと思います。

今回以下を参考にしました。

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0


Presentational Component

reduxではコンポーネントとコンテナーを


  • Presentational Component

  • Container Components

と名付けています。

というわけで、そのルールに則りこれからはその呼び名でそれぞれを使い分け、解説していきます。

Presentational Componentとはその名の通り、見た目を担当するコンポーネントになります。

多くの場合それはthis.props.childrenとして他に内包され、独自のマークアップとスタイルを持ちます。

またアクションやストアに依存しません。

なのでデータのロードや変更などのロジックの部分は切り離されます。

またpropsとしてデータとコールバックを受け取ります。

稀に独自のstateを持ちますが、それはデータではなくUIの状態になります。

stateやライフサイクルフック、パフォーマンスの効率化を必要としない限りはfunctional componentとして記述されます。

例としてPage, Sidebar, Story, UserInfo, Listが上げられます。


Container Components

対してContainer Componentsについてです。

Container Componentsではロジック(物事の振る舞い)に関与します。

Container Componentsはプレゼンテーションコンポーネントとコンテナコンポーネントの両方を含むことができますが、通常、ラッピングのdivを除いて独自のDOMマークアップはありません。スタイルは決してありません。

下位のコンポーネントにデータと振る舞いを提供します。

Fluxアクションを呼び出しそれらをコールバックとしてコンポーネントに渡します。

スタイルなどを持たないという点から、データソースとして機能する傾向があるため、基本的に状態保持と処理を行います。

通常、React Reduxのconnect()、RelayのcreateContainer ()、Flux UtilsのContainer.create()などの上位コンポーネントを使用して生成されます。

例としてUserPage、FollowersSidebar、StoryContainer、FollowedUserListが上がります。

これらの区別を明確にするために、以上の二つは別のフォルダに入れられます。


追記 2018/8/28

最近ぼくはプレゼンショナルとコンテナーを同じフォルダに置きます、componentフォルダとcontainerフォルダって遠くなりがちだし、それらを離すメリットなくね?って思って

reduxのissueにも分けても分けなくてもいいよって書いてました(url見失ったので、すいませんが気になる人は探してください)

次の章は僕的にはあくまでファイルの分離の利点だと思っています



コンポーネントの分離による利点

このようにコンポーネントを記述することで、アプリとUIをよりよく理解できます。

同じPresentational Componentに異なる状態ソースを持たせることで、それらを別のContainer Componentsに再利用することができます。

これによりSidebar, Page, ContextMenuをレイアウトコンポーネントとして抜き出し、別のContainer Componentにマークアップを重複させることなく利用できます。

重要なのは各コンポーネントはDOMを発行する必要はないということです。コンポーネントはUI間に境界を提供するだけでいいのです。


導入するタイミング

基本的にプレゼンテーションコンポーネントだけを使ってアプリケーションを構築したほうがいいです。

しかしアプリが大きくなってくると、Presentation Componentが多くのデータやpropsを渡すこととなります。そうなった時にContainer Componentを導入するべきです。

そうすることで階層の途中の無関係なコンポーネントに負担をかけることなく、末端のコンポーネントにデータと振る舞いを渡すことができます。

最初から二つを分けようとせず、リファクタリングを進行しながら分離をしていってください。


まとめ

ほとんど参考サイトの和訳になってしまいました。

というのも参考サイトは非常にわかりやすかったので改善のしようがなかったからです。

参考サイトはもう少し長かったのですが内容省いきました。気になる方はぜひ参考サイトを訪問してみてください!