公式には、ドキュメントのリアクト「という状態をReact.PureComponentさんがshouldComponentUpdate()唯一浅くオブジェクトを比較」、および状態は『深い』である場合には、この反対助言します。

これを踏まえて、React.PureComponentReactコンポーネントを作成するときに好むはずの理由はありますか？

質問：

• React.Component私たちが行くことを検討する可能性のある使用にパフォーマンスへの影響はありますReact.PureComponentか？
• 私は浅い比較だけshouldComponentUpdate()をPureComponent実行すると思います 。この場合、この方法はより深い比較に使用できないのでしょうか？
• 「さらに、React.PureComponentのshouldComponentUpdate()スキップは、コンポーネント全体のサブツリーの更新を支える」 -これは小道具の変更が無視されることを意味するのでしょうか？

質問が役に立った場合、この中程度のブログを読むことから生じました。

大きな違いReact.PureComponentとReact.ComponentではPureComponentない浅い比較状態変化にします。つまり、スカラー値を比較する場合はそれらの値を比較しますが、オブジェクトを比較する場合は参照のみを比較します。アプリのパフォーマンスの向上に役立ちます。

React.PureComponent以下のいずれかの条件を満たしている場合に行ってください。

• 状態/小道具は不変オブジェクトである必要があります
• 州/小道具には階層があってはなりません
• forceUpdateデータが変更されたときに呼び出す必要があります

使用しているReact.PureComponent場合は、すべての子コンポーネントも純粋であることを確認する必要があります。

React.PureComponentの使用を検討する可能性のあるReact.componentの使用にパフォーマンスへの影響はありますか？

はい、それはあなたのアプリのパフォーマンスを向上させます（浅い比較のため）

PurecomponentのshouldComponentUpdate（）は浅い比較のみを実行すると思います。これが事実である場合、上記の方法はより深い比較に使用できないのですか？

あなたはそれを正しく推測しました。上記のいずれかの条件を満たす場合に使用できます。

「さらに、React.PureComponentのshouldComponentUpdate（）は、コンポーネントサブツリー全体のプロップの更新をスキップします」-これは、プロップの変更が無視されることを意味しますか？

はい、浅い比較で違いが見つからなかった場合、プロップの変更は無視されます。

Componentそして、PureComponent1差があります

PureComponentメソッドをComponent処理することを除いて、まったく同じshouldComponentUpdateです。

小道具や状態変化するときは、PureComponent行います浅い比較小道具や状態の両方にします。Component一方、現在の小道具と状態をそのまますぐに比較することはできません。したがって、コンポーネントshouldComponentUpdateは、呼び出されるたびにデフォルトで再レンダリングされます。

浅い比較

前の小道具と状態を次の小道具と比較するとき、浅い比較では、プリミティブが同じ値（たとえば、1が1に等しい、またはtrueがtrueに等しい）であり、オブジェクトや配列などのより複雑なJavaScript値の間で参照が同じであることを確認します。

出典：https : //codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

私が見るように、主な違いは、コンポーネントの小道具と状態が変更されたかどうかに関係なく、親が再レンダリングされるたびにコンポーネントが再レンダリングされることです。

一方、純粋なコンポーネントは、親が再レンダリングした場合、純粋なコンポーネントのプロップ（または状態）が変更されない限り、再レンダリングされません。

たとえば、親、子、孫の3レベルの階層を持つコンポーネントツリーがあるとします。

親の小道具が変更されて、子の小道具が1つだけ変更されると、次のようになります。

• すべてのコンポーネントが通常のコンポーネントである場合、コンポーネントツリー全体が再レンダリングされます
• すべての子と孫が純粋なコンポーネントである場合、小道具が変更されたかどうかに応じて、1人の子だけが再レンダリングされ、1人またはすべての孫が再レンダリングされます。このコンポーネントツリーに多数のコンポーネントがある場合、パフォーマンスが大幅に向上する可能性があります。

ただし、純粋なコンポーネントを使用しても影響がない場合もあります。私は、親がreduxストアから小道具を受け取り、子供たちの小道具の複雑な計算を実行する必要があったときに、そのようなケースがありました。親はフラットリストを使用して子をレンダリングしました。

その結果、reduxストアに小さな変更が加えられるたびに、子供のデータのフラットリスト配列全体が再計算されました。これは、値が変更されていなくても、ツリー内のすべてのコンポーネントの小道具が新しいオブジェクトであることを意味しました。

この場合、純粋なコンポーネントは役に立ちません。再レンダリングが必要な場合は、通常のコンポーネントを使用し、shouldComponentUpdateで子をチェックインすることによってのみ、パフォーマンスを向上させることができます。