Reactコンポーネント化を複雑化させないための最低限の考え方

はじめに

最近、React開発を始めたばかりのフロントエンドエンジニアです。
ReactでライフサイクルやState管理など、理解はできてきたものの、
コンポーネントが複雑化してきて、非常に困っていたため、
整理のために書きました。

なにかご指摘がありましたら、積極的にコメントをいただけるとありがたいです。

とりあえず、考えることは一つ！

Reactのコンポーネントを役割で分ける、ということ！
具体的にいうと、コンポーネントを
　レンダリングを担当するもの
　データ構造や、データの流れを担当するもの
に分けます。

その二つについて、解説していきます

※内容的には、Reduxの公式(http://redux.js.org/docs/basics/UsageWithReact.html)
に乗っているものと同じ内容ですが、Reduxを使っていなくても、コンポーネントの整理には有効かと思います。

レンダリングを担当するもの(Presentational Component)

Presentatinal Componentは、
どのように見えるかのみに焦点をあてたコンポーネントで、propsで与えられたデータで、レンダリング時にどう表現するかを記述します。
そのため状態を持つ必要がないので、Reactを継承しなくて軽いStateless Functional Componentで記述します。
(※propsで渡ってくる値を一般化すると汎用性が増す　
悪い例：

ParentPage.jsx

import Task from '/template/Task'

export default class ParentPage extends React.Component {
...

<Task openTaskDetail={()=>this.openTaskDetail()} />
...
}

で渡し、

Task.jsx

const Task = (props) => {
 return (<h1 onClick={props.openTaskDetail} >Click!!</h1>)
}

で発火

いい例：

ParentPage.jsx

import Task from '/template/Task'

export default class ParentPage extends React.Component {
...

<Task handleClick={()=>this.openTaskDetail()} />
...
}

で渡し、

Task.jsx

const Task = (props) => {
 return (<h1 onClick={props.handleClick} >Click!!</h1>)
}

で発火

データ構造や、データの流れを担当するもの(Container Component)

Presentetional Componentを内包し、
基本DOMの構成はせず、
Presentational Componentへのpropsの受け渡しを担当する。
データの生成もここで行う。
そのため、どのように見えるかについてはまったく関与しなくて良い
(※Container Componentでデータを渡すときは、何をレンダリングするコンポーネントに渡しているかが、わかりやすい下位コンポーネントを持つべき

悪い例：

Shop.jsx

<TitleText  name={shop.name} />
<FlexRow>
 <Circle badge={shop.cart} />
 <Circle badge={shop.customer} />
</FlexRow>
<Number number={shop.tel} />
<GrayText text={shop.information} />

良い(?)例：

Shop.jsx

import ShopStatus from '../template/ShopStatus'
import ShopInformation from '../template/ShopInformation'

<ShopStatus name={shop.name} badgeCart={shop.cart} badgeCustomer={shop.customer} />
<ShopInformation tel={shop.tel} information={shop.information} />

// こっちの方が、コンポーネントが値をなんのために渡しているのか、わかりやすい！

まとめ

コンポーネントは
Presentatinal Componentは、レンダリング
Container Componentは、データ構造や、データの流れに対して責任を持つ
で分けよう。

それを理解した上で、Atomic　Designの考え方を取り入れると整理されて、とてもソースが見やすくなる、、、はず！！