ReactJS - 親コンポーネントでの `setState`のパフォーマンスへの影響

Question

Reactを使用して大規模なアプリケーションを構築しています。共有親コンポーネントが複数の子のすべての状態を処理します。これらの子供の中には、1000以上のアイテムのリストをレンダリングするものもあります。

親の内部でブール値をsetStateに切り替えると、親が再描画され、すべての子が再びレンダリングされることがわかりました。

私の質問は、子へのリスト項目のどれもが変更されない場合、再レンダリングによって子がループして、親が再レンダリングするたびに大量のリストを作り直すかどうかです。

ここで仮想DOMはどのような役割を果たしていますか？子はリストを再ビルドしますが、diffはリストの要素が変更されていないと見なすため、更新する必要はありませんか？

編集： 最後に、この場合、keyプロパティはリストの再レンダリングにどのように影響しますか？ユニークキーを持つ1000個のアイテムがすべてある場合、nullのキーを持つ3つのアイテム（同じキー値を持つことを意味します）次にはリスト全体を再レンダリングしますか？

Answer 1

子供はリストを再構築しますが、diffはリストの要素が変更されていないと判断するため、更新する必要はありませんか？

はい、正確です。これについては、ここで詳しく読むことができます：https://facebook.github.io/react/docs/reconciliation.html

通常、この操作は非常に簡単ですが、ほとんど知ることはできませんが、ある時点では差分パッチは遅くなります。ブール値を反転することはおそらく大きな問題ではありませんが、60 fpsでそのブール値を反転すると、いくつかのジャンクが発生する可能性があります。

目立った遅れを防ぐために通常はスマートなことがありますが、shouldComponentUpdateの実装は常に選択肢です。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

あなたがそこにいるが、これは興味のある何かである場合にはおよそReact.PureComponentをお読みください。