☰

ES6 クラスベースの React コンポーネントと関数型 ES6 React コンポーネントはいつ使用すればよいですか? 質問する

tag-icon • tag-icon javascript reactjs ecmascript-6 redux
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>
    );
}

そのコンポーネントによって操作される状態がない場合は常に機能的であると考えていますが、それだけでしょうか?

ライフサイクル メソッドを使用する場合は、クラス ベースのコンポーネントを使用するのが最適だと思います。

ベストアンサー1

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

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

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

  • 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 アプリのボトルネックになっているという話は聞いたことがありません。時期尚早な最適化は諸悪の根源です。問題がある場合は、この点について心配してください。

古い回答:正しい考えです。コンポーネントがいくつかのプロパティを取得してレンダリングする以上の処理を行わない場合は、関数型を使用してください。これらは、同じプロパティが与えられれば常に同じようにレンダリングされ、同じように動作するので、純粋な関数と考えることができます。また、ライフサイクル メソッドを気にしたり、独自の内部状態を持ったりしません。

軽量であるため、これらの単純なコンポーネントを関数コンポーネントとして記述することは、かなり標準的です。

コンポーネントに状態の保持などの追加の機能が必要な場合は、代わりにクラスを使用します。

より詳しい情報：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

おすすめ記事