[解決済み] 関数コンポーネントのshouldComponentUpdate

質問

Reactの shouldComponentUpdate (について質問があります（上書きされていない場合）。私は純粋な、関数コンポーネントが好きですが、私はprops/stateが変更されていないにもかかわらず、それが毎回更新されることを恐れています。 だから私は代わりにPureComponentクラスを使用することを検討しています。

それに関する私の質問です。 ファンクション コンポーネントには、同じ shouldComponentUpdate のチェックはPureComponentsと同じですか？それとも毎回更新されるのでしょうか？

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

Reactでは、機能コンポーネントはステートレスであり、ライフサイクルメソッドを持ちません。 ステートレス・コンポーネントは、バンドルに多くのコードを記述することなくReactコンポーネントを記述するエレガントな方法です。 しかし、内部的には、Statelessコンポーネントは現在最適化が適用されていないクラスでラップされています。つまり、ステートレス・コンポーネントもステートフル・コンポーネントも、内部的には同じコードパスを持っています（定義は違いますが）。

しかし、将来的にはここに書かれているように、Reactはステートレスコンポーネントを最適化する可能性があります。

将来的には、不要なチェックやメモリを回避することで、これらのコンポーネントに特化したパフォーマンスの最適化も可能になるでしょう 不必要なチェックやメモリの割り当てを避けることで、これらのコンポーネントに特化したパフォーマンスの最適化ができるようになるでしょう。 を回避することで、これらのコンポーネントに特化したパフォーマンスの最適化が可能になります。 [ もっと読む... ]。

shouldComponentUpdate

ここで、独自の最適化を適用し、コンポーネントの不要な再描画を回避することができます。さまざまなタイプのコンポーネントでこのメソッドを使用する方法を以下に説明します。

• 機能的なステートレス・コンポーネント

  前述したように、ステートレス・コンポーネントはライフサイクル・メソッドを持たないので、このようなコンポーネントを shouldComponentUpdate . しかし、それらは別の方法ですでに最適化されており、よりシンプルでエレガントなコード構造を持っており、すべてのライフサイクルフックを持つコンポーネントよりも少ないバイト数で済みます。

• はReact.PureComponentを拡張します。

  から React v15.3.0 という新しいベースクラスがあります。 PureComponent で拡張し PureRenderMixin が組み込まれています。ボンネットの中で、これは現在のプロップ/状態と次のプロップ/状態の浅い比較を行います。 shouldComponentUpdate .

  とはいえ、私たちはまだ PureComponent クラスに依存することはできません。この異常なケースは、プロップが Object 型(配列、日付、プレーンオブジェクト)を持つ小道具がある場合に起こります。これは、オブジェクトを比較するときにこの問題が発生するためです。

  const obj1 = { id: 1 };
  const obj2 = { id: 1 };
  console.log(obj1 === obj2); // prints false
  
  

  したがって、浅い比較では、物事が変わったかどうかを判断するのに十分ではありません。しかし PureComponent クラスは、プロップが単なる文字列、数値、ブーリアンなどであり、オブジェクトでない場合に使用します。また、独自の最適化を実装したくない場合にも、これを使用します。

• React.Componentを拡張します。

  上記の例で考えてみましょう。 id が変更された場合、オブジェクトが変更されたことがわかれば、そのオブジェクトを比較することによって、独自の最適化を実装することができます。 obj1.id === obj2.id . そこで、私たちは extend 通常の Component をベースクラスとし shouldComponentUpdate を使用して、特定のキーの比較を自分自身で行うことができます。