React公式はコンポーネントの継承を推奨していない

2018-09-07

Composition vs Inheritanceと書かれると理解しづらいけれども、コンポーネント思考 vs オブジェクト指向と書くと少し理解しやすくなる気がします。

で、なぜ React の公式は、コンポーネント(≒ クラス)の継承を推奨していないのかというと、(公式にはっきりと書かれてはいませんが)一つ一つのコンポーネントが複雑化するような設計はして欲しくないからだと推測されます。

根拠としては、React 公式は以下のように書いているからです。

上記はいずれも、1 コンポーネントに対して、機能が肥大化することを防ぎ、かつコンポーネントごとの結合度を弱くすることを推奨する記述だと思われます。

一方、もしコンポーネントの継承を許容してしまった場合、以下のようなコンポーネントが生まれることが想定されます。

  • コンポーネントを再利用する場合、props 以外の制限が発生する
  • 一部のコンポーネントの使い回しができなくなる

React の公式は、「とかくコンポーネントには柔軟性を持たせるべきだ」と言っていますし、自分もその考え方には大いに賛同します。

『このコンポーネント、肥大化したし再利用したいから継承を組みたいなぁ』と思うケースもあるとは思います。

が、そこはぐっと堪えて、『コンポーネントの切り出しで対応できないか？Context を利用して複雑化を解消できないか？HOC を利用して肥大化を抑えれないか？』と考えを変えていくのはいかがでしょうか？

React公式はコンポーネントの継承を推奨していない - kk-web