2017-02-10 6 views
1

小道具変更のためにコンポーネントが1秒間に数回レンダリングされる必要がある場合、このコンポーネントはReact.PureComponentを拡張する必要がありますか?React.PureComponentは、頻繁に更新されるコンポーネントに使用する必要がありますか?

コンポーネントには子コンポーネントはありませんが、それ自体が深くネストされているため、小道具は他のいくつかのコンポーネントを通過しています。

一般的に、React.PureComponentを使用するかどうかを決定する際に考慮すべき重要事項は何ですか。どのシナリオで使用するのが悪いですか?

答えて

0

はいこれは、コンポーネントが不必要に同じ小道具で頻繁に再レンダリングされているため、PureComponentに適しています。

React.Componentから拡張された子コンポーネントは、親がrenderを呼び出すたびにrenderを呼び出します。代わりに子コンポーネントがPureComponentから拡張されている場合、親が以前に渡された小道であるshallowEqualを持たない小道具を渡すときにのみ、renderが呼び出されます。

それは限り

  • コンポーネントとその子は、あなたのコンポーネントが直接そのにより変異されているオブジェクトまたは配列小道具を持っていないcontextアップデート
  • に依存しないようPureComponentを使用することが一般的に安全です親(shallowEqualはこれらの変更を検出しません)
+0

ありがとうございますが、私は小道具が異なる値を数回持っていることを意味しました....レンダリング機能が本当にシンプルであれば、それはPureComponent多くをチェックする1秒に1回。また、ページには、その周波数で変化するこれらのコンポーネントが何百もあります。 – c0deNinja

+0

'shallowEqual'は、特に新しい要素を作成しなければならない' render'と比較して、シャドーDOMの比較をトリガするのに比べて、パフォーマンスコストが非常に少なくなっています。すべてのコンポーネントインスタンスが時間の100%ほとんど異なる小道具を取得している場合は、「PureComponent」からわずかなパフォーマンスヒットが発生していることを確認してください。しかしそれ以外の場合は純利益の可能性が高いです。 –

関連する問題