Sollte ich mich mit der Rate der Statusänderung in meiner React Redux App befassen?

Question

Ich implementiere/evaluiere eine "Echtzeit" -Web-App mit React, Redux und Websocket. Auf dem Server habe ich Änderungen an meinem Datensatz mit einer Rate von etwa 32 Änderungen pro Sekunde.

Jede Änderung verursacht eine Async-Nachricht an die App mit Websocket. Die async-Nachricht initiiert eine RECEIVE-Aktion in meinem Redux-Status. Statusänderungen führen zum Rendern von Komponenten.

Meine Sorge ist, dass die Frequenz der Zustandsänderungen zu inakzeptablen Belastung auf dem Client führen wird, aber ich bin nicht sicher, wie Last gegen Anzahl der Nachrichten, die Anzahl der Komponenten dieses etc. zu charakterisieren

Wann wird ein Problem werden oder welche Werkzeuge würde ich verwenden, um herauszufinden, ob es ein Problem ist?

Beeinflusst die "Form" meines Zustands die Renderleistung? Sollte ich in Betracht ziehen, High-Change-Objekte in einer Entität zu platzieren, während sich Low-Change-Objekte in einer anderen Entität befinden?

Sollte ich mich auf das Batching der Änderungsereignisse konzentrieren, sodass die App auf eine Liste von Änderungen statt auf jede einzelne Änderung reagieren kann (wodurch die Änderungsrate des Status effektiv reduziert wird)?

Ich freue mich über Vorschläge.

Answer 1

Das sind eigentlich ziemlich vernünftige Fragen zu stellen, und ja, die klingen alle nach guten Ansätzen.

Als ein Gedanke - Sie sagten, dass Ihre serverseitigen Datenänderungen 32 Mal pro Sekunde auftreten. Kann diese Information selbst überhaupt zusammengestellt werden? Müssen Sie buchstäblich jedes einzelne Update anzeigen?

Sie könnten den Abschnitt "Leistung" der Redux-FAQ interessiert sein, die Antworten auf und reducing the number of store subscription updates enthält.

Gruppieren Sie Ihren Zustand teilweise basierend auf Update-Frequenz klingt wie eine gute Idee. Komponenten, die nicht für diesen Chunk abonniert sind, sollten Updates basierend auf den integrierten flachen Gleichheitsprüfungen von React Redux überspringen können.

Ich werde einige zusätzliche nützliche Links für leistungsbezogene Informationen und Bibliotheken hinzufügen. Meine React/Redux-Links Repo hat einen Abschnitt auf React performance, und meine Redux-Bibliothek Links Repo hat relevante Abschnitte auf store change subscriptions und component update monitoring.