React - オブジェクトIDの変更で再レンダリングしないように深い等価性を使用

Question

Reactでthis page about performanceについて議論すると、浅い等価性を使用してオブジェクトの変更を避けることができるので、コンポーネントは参照をチェックして、

私は、反対のことについて実際には疑問に思っています。オブジェクトの参照が変更されたときに、等価チェックで深い等価性を使用し、無視することは可能ですか？

理由は、いくつかの内部変数のクローンバージョンを返すライブラリがあり、それらの変数の更新を表示するために、その内部変数を再質問して新しいクローンを取得する必要があります。ですから、私は全く別のオブジェクトを参照することになりますが、フィールドを変更することはできませんでした。しかし、私がそのような更新をリクエストするたびに、Reactはすべての参照が変更されたためにすべてが変更されたと考え、不要なものをたくさんレンダリングします。

現在のソリューション：限り、オブジェクトのフィールドがlodashのisEqual平等性チェックが深いので、トリックを行い

shouldComponentUpdate(nextProps, nextState) { 
    return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState); 
} 

を変更しないと、レンダリングからそれを停止するコンポーネントでこれを投げたが、私はこの動作を望む各コンポーネントでこれを行う必要があります。この

私が最初の場所でこれにつながると私はそれを避けることができたに全く

または多分を使用しているアンチパターンを達成することのいずれか

• 好ましい方法があります場合、私は疑問に思います上記の方法が最適です。

Answer 1

私はお勧めしません、あなたは、次の理由でこれを行う：

1. ディープ比較が高価です。ですから、何か変わるたびに深い比較をしてレンダリングの部分をしなければなりません。私たちはそれが作られたレンダリングの原因を反応させる方が良いでしょう。

2. すべてのコンポーネントで扱う場合。この問題を回避するには、オブジェクトの構造を解除してより小さな小道具を送信し、反応が最適化された再レンダリングを処理できるようにします。例えば：

   <Footer data={object} />

   <Footer title={object.title} copyright={object.copyright}/>

私はそれが役に立てば幸い！