[解決済み] リアクトのシャローコンパールはどのように機能するのか

質問

で このドキュメント を見ると、React の

shallowCompareは、現在のpropsとnextPropsオブジェクト、および現在のstateとnextStateオブジェクトに対して浅い等式チェックを実行します。

私が理解できないことは、それが浅くオブジェクトを比較する場合、shouldComponentUpdateメソッドは常にtrueを返すということです。

状態を変化させるべきではありません。

で、状態を変更しない場合、比較は常に false を返すので、shouldComponent の更新は常に true を返します。これがどのように動作しているのか、またパフォーマンスを上げるためにどのようにオーバーライドするのか、混乱しています。

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

浅い比較では、等しいかどうかをチェックします。スカラー値 (数値、文字列) を比較する場合は、その値を比較します。オブジェクトを比較する場合は、属性を比較せず、参照のみを比較します（例："同じオブジェクトを指しているか?")。

次のような user オブジェクト

user = {
  name: "John",
  surname: "Doe"
}

例1:

const user = this.state.user;
user.name = "Jane";

console.log(user === this.state.user); // true

ユーザー名を変更したことに注意してください。この変更にもかかわらず、オブジェクトは同等です。参照はまったく同じです。

例2:

const user = clone(this.state.user);
console.log(user === this.state.user); // false

さて、オブジェクトのプロパティに何の変更も加えなければ、それらは完全に異なるものになります。元のオブジェクトのクローンを作成することで、異なる参照を持つ新しいコピーを作成することができます。

クローン関数は以下のようになります（ES6構文）。

const clone = obj => Object.assign({}, ...obj);

浅い比較は、変更を検出する効率的な方法です。これはデータを変更しないことを前提としています。