ReactJS - Leistungsimplikation von `setState` in der übergeordneten Komponente

Question

Ich erstelle eine große Anwendung mithilfe von React, wobei eine gemeinsame übergeordnete Komponente den gesamten Status für mehrere untergeordnete Elemente verarbeitet. Einige dieser Kinder machen Listen von über 1000 Elementen.

Ich realisiere, dass das Umschalten eines Boolean innerhalb des Elternteils mit setState den Eltern wieder rendern wird, der wiederum alle seine untergeordneten Elemente wieder rendert.

Meine Frage ist, wenn keine der Listenelemente für das Kind ändert, dann führt das erneute Rendern dazu, dass das Kind die gigantische Liste durchläuft und erneut erstellt - jedes Mal, wenn das Elternobjekt erneut gerendert wird?

Wo spielt das virtuelle DOM eine Rolle? Erstellt das Kind die Liste neu, aber das DOM muss nie aktualisiert werden, weil das Diff erkennt, dass sich die Listenelemente nicht geändert haben?

Bearbeiten: Schließlich, wenn das der Fall ist, wie wirkt sich die key Eigenschaft auf die Liste neu zu rendern? Wenn ich 1000 Elemente habe alle mit eindeutigen Schlüsseln, aber 3 Elemente haben Schlüssel, die null sind, (was bedeutet, sie haben den gleichen Schlüssel Wert) dann macht die gesamte Liste neu rendern?

Answer 1

Erstellt das Kind die Liste neu, aber das DOM muss nie aktualisiert werden, weil das Diff erkennt, dass sich die Listenelemente nicht geändert haben?

Ja genau. Näheres dazu finden Sie hier: https://facebook.github.io/react/docs/reconciliation.html

In der Regel ist diese Operation so schnell, dass Sie kaum feststellen können, aber irgendwann wird das Diff-Patch langsam werden. Einen booleschen Wert zu spiegeln, ist wahrscheinlich keine große Sache, aber das Boolesche Boolean mit 60 fps kann etwas Jank verursachen.

Es gibt normalerweise schlaue Dinge, die Sie tun können, um jede spürbare Verzögerung zu verhindern, aber die Implementierung shouldComponentUpdate ist immer eine Wahl.

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

Während Sie dort sind, lesen Sie React.PureComponent falls dies etwas ist, das Sie interessiert.