Reactのクラスコンポーネントと関数コンポーネント

質問１

Reactにクラスコンポーネントと関数コンポーネントの２つの書き方がありますが、どちらかに統一しての1つのアプリケーション開発をするのか、それとも、あるファイルではクラスコンポーネントで書いて別のファイルでは関数コンポーネントで書いてもいいのでしょうか。

分かる方がいましたら、回答いただけますと幸いです。

行動規範の内容に同意します

回答3件

ベストアンサー

統一する必要はありません。使い分けることでパフォーマンス改善が見込めます。
特徴としては

React.Component

クラスコンポーネント。デフォルトでは親がrerenderされると必ずrerenderされる。shouldComponentUpdate()を実装すると、親がrerenderされてもshouldComponentUpdate()の戻り値がtrueでないとrerenderされない。

React.PureComponent

クラスコンポーネント。親がrerenderされた時、自身のstateとpropsの変化をshallowEqual()で比較する。変化があればrerenderする。（shouldComponentUpdate()がshallowEqual()によって実装済みと考えればよい）
不要なrerenderが減るので軽くなると思われがちだが、shallowEqual()での比較にもコストがかかっているので、どうせ毎回rerenderされるようなComponentでは使わない方が良い。

React.FC

関数コンポーネント。親がrerenderされると必ずrerenderされる。Stateを持つこともできるが、持たない場合SFC(Stateless Functional Component)と呼ばれる。クラスコンポーネントよりも動作が軽いことが多いが、constructorを持てない等、可読性が落ちる場合がある。完全にrerenderを必要としないcomponentを作りたい場合は、SFCで作るよりもmemoで作る方が良い。末端のComponentなどの機能の少ない単純なComponentで、rerenderを必要とするものに使用すると良い。

React.memo

関数コンポーネント。第1引数と第2引数があり、第1引数のreturnがrenderされる。第2引数はrerenderをしないかどうかの関数（areEqual()）を渡すことができる。shouldComponentUpdate()に似ているが、あちらは「rerenderするかどうか」であるのに対し、areEqaul()は「rerenderしないかどうか」なので、returnがtrueの時rerenderしないことに注意。また、第2引数は省略可能で、省略した場合はshallowEqual()で比較される。

また全体を通して、shallowEqual()は浅い比較であり、stateやpropsにObjectやArrayを含んでいる場合は正しい比較がなされない可能性があるため注意が必要。

投稿2020/08/13 00:46

Hogeike

総合スコア293

退会済みユーザー

2020/08/13 11:09

なるほど！クラスコンポーネントと関数コンポーネントの特徴をしっかりと理解した上で、状況によって使い分ければいいんですね！

行動規範の内容に同意します

良し悪しはありますが、正直なところReactもしくはReactNativeで何かしらのアプリケーションを実現する上では、どちらの方法を取っても可能です。

その上で、クラスコンポーネントと関数コンポーネントを使い分けると、パフォーマンス向上が見込めたり、可読性が上がったりします。
例えばReact.Componentを使うよりReact.PureComponentを使った方が余分なrenderを省けますし、細かい単位で部品化するならReact.memoを使うのもアリです。
もちろんstateが不要なのであれば関数コンポーネントを使う方が、読み手がコンポーネントの状態に意識を割く必要がなくなり保守等が捗ります(関数コンポーネントでもuseState等のhookを用いればstateは持てますが・・・)

このあたりはどれだけ作り込みに時間を割けるかとの相談なので、ご自身の目的に合わせて(例えば単に簡易プロトタイプを作るだけならそこまでコンポーネント構成を考える必要はないとか)どちらの手法を取るかを選択するといいと思います。

投稿2020/08/12 23:07