React + Redux Performance-Optimierung mit ComponentShouldUpdate

Question

Ich habe eine Reaktion/Redux-Anwendung, die groß genug geworden ist, um einige Leistungsoptimierungen zu benötigen.

Es gibt ca. ~ 100 einzigartige Komponenten, die über Websocket-Ereignisse aktualisiert werden. Wenn viele Ereignisse auftreten (etwa ~ 5/Sekunde), beginnt der Browser erheblich langsamer zu werden.

Der größte Teil des Status wird in einem Redux-Speicher als Immutable.js-Objekte gespeichert. Das gesamte Geschäft wird in ein einfaches JS-Objekt konvertiert und als Props über den Komponentenbaum weitergegeben.

Das Problem ist, wenn ein Feld aktualisiert, der gesamte Baum aktualisiert und ich glaube, das ist, wo es am meisten Raum für Verbesserungen gibt.

Meine Frage:

Wenn der gesamte Speicher durch alle Komponenten übergeben wird, gibt es eine intelligente Art und Weise Komponenten Aktualisierung zu verhindern, oder benötige ich eine benutzerdefinierte shouldComponentUpdate Methode für jede Komponente, basierend auf welchen Requisiten es (und seine Kinder) tatsächlich benutzen?

Answer 1

Sie wirklich wollen nicht so Dinge tun. Erstens, wie ich es verstehe, Immutable toJS() ist ziemlich teuer. Wenn Sie das für den gesamten Staat jedes Mal tun, wird das nicht helfen.

Zweitens, ruft toJS() sofort fast den gesamten Nutzen der Verwendung von Immutable.js Typen in erster Linie. Sie möchten Ihre Daten wirklich in unveränderter Form speichern, bis Ihre Renderfunktionen funktionieren, so dass Sie die Vorteile der schnellen Referenzprüfungen in shouldComponentUpdate erhalten.

Drittens, Dinge ganz von oben nach unten zu tun, verursacht normalerweise eine Menge unnötiger Neu-Rendering. Sie können umgehen, dass, wenn Sie auf fast alles in Ihrem Komponentenbaum haften, aber das scheint übermäßig.

Das empfohlene Muster für Redux besteht darin, connect() für mehrere Komponenten auf verschiedenen Ebenen in Ihrem Komponentenbaum zu verwenden. Das wird die Arbeit auf mehreren Ebenen vereinfachen.

Vielleicht möchten Sie einige der Artikel lesen, die ich auf React and Redux Performance gesammelt habe. Insbesondere ist die jüngste Diashow auf "High Performance Redux" ausgezeichnet.

Update:

Ich hatte eine gute Debatte mit einem anderen Redux Benutzern ein paar Tage vor dieser Frage gestellt wurde, über in Reactiflux des #redux Kanal, auf Top-down-vs mehreren Verbindungen. Ich habe diese Diskussion kopiert und eingefügt: top-down single connect vs multiple lower connects.

Auch gestern gab es einen Artikel, der praktisch genau dieses Thema der übermäßigen Verwendung der toJS() Funktion von Immutable.js behandelt: https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4. Sehr gut geschriebener Artikel.