React.ComponentとReact.PureComponent


224

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

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

質問

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

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


5
あなたがこれを投稿してから2か月が経っていることはわかっていますが、この記事が役立つと思いました:60devs.com/pure-component-in-react.html
MrOBrian

回答:


283

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

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

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

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

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

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

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

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

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

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


1
こんにちは@VimalrajSankar。ここで助けてくれてありがとう。次のステートメントの例を挙げていただけます It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.か?ありがとう
Ishan Patel

1
@ Mr.Script私はこれがstackoverflow.com/a/957602/2557900
vimal1083

3
State/Props should not have a hierarchy申し訳ありませんが、ここでの階層の意味を少し説明できますか?
Sany Liew、2018

1
@SanyLiewそれは状態を意味し、propsは数値や文字列などのプリミティブ値のみを含み、オブジェクト(階層)内のオブジェクトは含まないようにする必要があります。
jedmao 2018

3
state / propsが不変オブジェクトである場合、階層を保持していても、それらの階層が不変オブジェクトも維持している限り、PureComponentを使用しても問題ありませんか?
Sany Liew、

39

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

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

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

浅い比較

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

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


React.Component =>したがって、同じコンポーネントを同じコンポーネントで何度も再レンダリングすると、子のレンダリングをトリガーします。小道具が変更されたかどうかに関係なく
Ehsan sarshar

23

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

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

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

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

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

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

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.