[解決済み】ES6クラスベースのReactコンポーネントと機能的なES6 Reactコンポーネントの使い分けはいつ？

質問

Reactの学習に時間を費やした後、コンポーネントを作成するための2つの主要なパラダイムの違いを理解しました。

私の質問は、どのような場合にどちらを使うべきか、またその理由は何かということです。また、どちらか一方を使うことの利点やトレードオフは何ですか？

ES6のクラスです。

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

機能的です。

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

そのコンポーネントで操作する状態がないときはいつでも関数的だと思うのですが、そうなんでしょうか？

ライフサイクルメソッドを使用する場合は、クラスベースのコンポーネントを使用するのがベストかもしれませんね。

どのように解決するのですか？

古い回答です。 あなたの考えは正しいです。コンポーネントがプロップを受け取ってレンダリングする以上のことをしないのであれば、関数型にしましょう。同じプロップがあれば、常に同じようにレンダリングし、同じように動作するので、これらは純粋関数と考えることができます。また、ライフサイクルメソッドを気にしたり、独自の内部状態を持ったりすることもありません。

軽量なので、こうしたシンプルなコンポーネントを機能部品として書くのは、ごく普通のことです。

状態を保持するなど、より多くの機能が必要な場合は、代わりにクラスを使用します。

詳しくはこちら https://facebook.github.io/react/docs/reusable-components.html#es6-classes

新しい回答 : 上記の多くは、React Hooksが導入されるまでは、真実でした。

• componentDidUpdate で複製することができます。 useEffect(fn) ここで fn は、再レンダリング時に実行される関数です。

• componentDidMount メソッドを複製することができます。 useEffect(fn, []) ここで fn は再レンダリング時に実行される関数であり [] は、コンポーネントが再レンダリングするオブジェクトの配列で、少なくとも 1 つが前回のレンダリング以降に値を変更した場合にのみ、再レンダリングされます。何もない場合は useEffect() は、最初のマウント時に一度だけ実行されます。

• state で複製することができます。 useState() であり，その戻り値は状態の参照と状態を設定できる関数に分解できる（すなわち． const [state, setState] = useState(initState) ). 例で説明すると、もっとわかりやすいかもしれません。

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

小さな余談ですが、パフォーマンス上の理由から機能コンポーネントを使わないという議論を何人も耳にしたことがあります。

関数型コンポーネントでは、レンダリングごとにイベント処理関数が再定義されます。

しかし、あなたのコンポーネントが本当にそのような速度やボリュームでレンダリングしているのかどうか、よく考えてみてください。

もしそうであれば、関数再定義の際に useCallback と useMemo フックを使用します。しかし、これによってあなたのコードが（微視的に）次のようになる可能性があることを心に留めておいてください。 パフォーマンス低下 .

しかし、正直なところ、Reactアプリで関数の再定義がボトルネックになったという話は聞いたことがありません。早すぎる最適化は諸悪の根源 - 問題が起きてから心配しましょう