React Redux rerders gesamte Liste auf einzelne Objekt Attribut ändern

Question

Ich habe eine Liste (immutable.js) in meinem Speicher mit mehreren Objekten. Diese Liste wird in einer Komponente als Tabelle mit Zeilen angezeigt. Diese Zeilen sind Unterkomponenten, die ein einzelnes Objekt anzeigen. Ein Attribut dieser Objekte sollte bearbeitbar sein. So onChange() ich eine Aktion, die das Attribut des einen bestimmten Objekts ändern sollte. Da wir den Zustand niemals ändern sollten, gebe ich eine ganze neue Liste mit nur diesem geänderten Objekt zurück. Da es sich jedoch bei der gesamten Liste um ein neues Listenobjekt handelt, wird die Tabellenkomponente bei jeder einzelnen Änderung aktualisiert. Dies führt zu einer wirklich langsam funktionierenden App.

Ich habe gerade den offiziellen todo app example angesehen und es mit dem Perf-Addon inspiziert. In der Erkenntnis, dass sie bei jeder Änderung auch die gesamte Todo-Liste neu anordnen (als erledigt markieren, Markierung aufheben). Wie soll ich das beheben?

Answer 1

Die größten Faktoren, die sich auf die Leistung beim Rendern von Listen auswirken, sind hohe Rendering-Zyklen und teure DOM-Mutationen. Stellen Sie sicher, dass Ihre Listenelemente beim Rendern so effizient wie möglich sind. Richtig ausgeführt, wird dies einen großen Unterschied machen.

Sie haben ein paar einfache Optionen.

Zerlegen Sie Ihre Zeilen in eine eigene Komponente (falls noch nicht geschehen) und optimieren Sie den Render- und Aktualisierungszyklus.

Verwenden Sie eine Bibliothek wie react-virtualized, um die Leistung von Liste/Tabelle/Raster zu unterstützen.