Reactでのclassとfunctionの違い

Question

#componentを定義する際に、class構文かfunctionか
公式のドキュメントでは「Reactはどちらも同じように認識する」のような記載があったと思うのですが、実際にこの２つはどのように使い分けていけばよいのでしょうか？

##例えば、リストを表示させる場合
公式にあるように、数字をリスト表示させる場合を考えます。
Lists and Keys - React

functionで定義する場合（公式より引用

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

class構文で定義する場合

class NumberList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

このように、functionで定義した場合はconst listItemsが関数内に入っているのですが、classで定義する場合にはclass内に入れることができず、何となくもどかしいというか。

componentの種類などによりこの2つを使い分けたほうがいいのか、どちらかに統一してしまったほうがいいのか、使い分けの方法を教えてほしいです。
よろしくお願いします。

<<追記>>
In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.

Answer 1

こんにちは。
両者の大きい違いは、

後者の React.Component を extendsしたクラスを作るほうは
状態を管理する（つまり、ライフサイクルメソッドを適切に使う）ことにより、
render() を制御できる（or 制御する必要がある）が、
前者の単なる関数でコンポーネントを返すほうは、そのような状態管理による
render()制御ができない。（制御できることといえば、propsを渡せることだけ）

ということかと思います。
開発の現場で、何か新しいコンポーネントを作るときは

何らかのイベント（マウスのクリックだったり APIのレスポンスが

返ってきた等）に反応しなければならないコンポーネントは
React.Component をextendして作る。

ぐらいの直感的な覚え方をして、どちらにするか決めています。
初めは状態管理なしの関数で作っておいたのだけれど、
開発が進んでいくにつれて、それを状態も持つように、
class に「格上げ」するといったことも、まま、あります。

蛇足ですが、stackoverflowに以下の質問を見つけました。

react-when-to-use-es6-class-based-components-vs-functional-es6-components

これの、上から2番目の回答にある3つの箇条書き、

• The component needs to maintain state
• The component is re-rendering too much and you need to control that via shouldComponentUpdate
• You need a container component

が分かりやすいです。

以上、参考になれば幸いです。

Comments

[dwayne_johnson]

なるほど。つまり、基本的にピュアなcomponentはfunctionで作っていき、state管理が必要な場合にのみclassに格上げしていくというように作っていけばよいといった感じでしょうか。

大変納得しました。ありがとうございます。

[jun68ykt]

お役に立ててよかったです。

> つまり、基本的にピュアなcomponentはfunctionで作っていき、state管理が必要な場合にのみclassに格上げしていくというように作っていけばよい

はい。その方針で問題ないかと思います。

たとえば状態管理に redux を使った SPA では、ある画面の画面全体をくくる<div />は、おそらくclass で作ることになると思いますが、
その画面で state を持つコンポーネントが、全体をくくるそれ1つだけだと、小さい画面要素へのprops 渡しが煩雑すぎるということになれば、
どこか適切な領域に state を持たせる、という算段になるかと思います。
なので、

なるべくピュアなcomponentで作るようにするには、画面上のどこを state を持った描画要素として見るか、という見極めが肝になってくる

ということかなと思います。

Answer 2

単純に、life cycle methodを使う必要がある場合やstateを使う場合はclass構文でコンポーネントを作る必要が出てくるので、これらが必要ならclass、そうでないなら、functionという考え方で基本的にOKかと思います。

どちらかに統一してしまったほうがいいのか、

と、ありますが、統一するのであれば、必然的に前述の理由により、classでコンポーネントを作成する方です。統一するのはアリだと思います。

実際、最初、functionでstateless componentを作っていたけど、その後、stateを持たせたくなったり、life cycle methodを使う必要が出てきたりして、書き換えることは割とよくあるはずなので。

この辺は以前、「functional componentっていらなくね？」みたいな議論を、海外のreactコミュニティー界隈で見かけていました。両者によるパフォーマンスの違いも現状、見られないということですし。

Comments

[dwayne_johnson]

なるほど。
統一するのも、書き換えの手間を省くという意味では有用ですね。

componentについて深く学びなおす良い機会になりそうです。
ありがとうございます。

[React Stateless Functional Componentを使うといい９つのポイント！（Class Based との違い）](https://qiita.com/Uuparu/items/79dd1d70b45d6d82992c)
[メンテナブルな React Component を目指すための小技集](https://qiita.com/terrierscript/items/372727448b58d4738018)