リアクションのshallowCompareはどのように機能しますか？

Question

は、ドキュメントが小道具又は 状態に対する浅い比較が失敗し、したがって、コンポーネントは更新する必要がある場合

shallowCompareがtrueを返すことを述べて反応します。

だから、私のコンポーネントには、状態が存在しない場合、正しく理解していると私は小道具キーには変化、

let shallowDiff = Object.keys(this.props).filter((item) => { 
     return this.props[item] !== nextProps[item]; 
}); 
return shallowDiff.length !== 0; 

が反応の比較と同じように返す必要があり、このコードは存在しないわかっている場合。しかし、それはしません。変更がなければ、私のコードは空の配列を返しますが、reactはtrueを返します。私はこの動作を理解し、問題キーを検索する方法を探そうとしていますが、私はそれを取得しません。

Answer 1

shallowCompareは従来のアドオンです。代わりにReact.PureComponentを使用してください。 https://facebook.github.io/react/docs/shallow-compare.html

stateまたはpropsに変更がない場合、shallowCompareはfalseを返します。もちろん、変更があった場合、shallowCompareはtrueを返し、Componentの再描画を続けます。

しかし、深くネストされたオブジェクトがある場合、shallowCompareはネストされたオブジェクトが更新/変更されたことを伝えることができません。

あなたは、オブジェクトが変更されているかどうかを確認するために、独自の関数を書くのいずれか、またはプロパティのORDERが重要ませある場合は、変更を確認することは非常に単純な方法を使用することができます。

JSON.stringify(obj1) === JSON.stringify(obj2) 

私は個人的には、使用ケースが狭すぎるため、shallowCompareまたはReact.PureComponentの使用をお勧めしません。複雑なオブジェクトがある場合、どちらの関数も効果的ではありません。あなたの機能があなたのために働くなら、それを使用してください。