ReactJS eine Menge Daten im Zustand behandeln

Question

Ich habe eine React-Anwendung, die eine Menge Daten verarbeiten muss. Insgesamt ist es eine einfache Anwendung:

• -Header mit ein paar Links
• Suchleiste
• Tabelle

Der Fang wird, je nachdem, was gesucht wird ... der Tisch muss Anzeige von bis zu 1.000 Zeilen nach etwa 100 Spalten. Wenn die HTTP-Anforderung diese Daten zurückgibt und den Status eingibt, wird die Anwendung ziemlich unbrauchbar. Jeder andere Versuch, den Status zu aktualisieren, nachdem er diese Daten enthält, dauert entweder ewig oder führt zum Absturz des Browsers. Selbst wenn ich die Tabelle so beschränke, dass 20 Zeilen x 100 Spalten angezeigt werden, ist die Statusaktualisierung zwar deutlich schneller, aber dennoch zu aktualisieren.

Ich habe versucht, das Internet zu durchsuchen, um eine gute Lösung zu finden und sind kurz gekommen, so dass alle Ideen/Hilfe/Vorschläge willkommen sind. Wenn Redux hilft, habe ich kein Problem, das zu implementieren, ich will einfach nicht meine Zeit verschwenden, wenn es keinen Gewinn gibt.

Answer 1

Sie werden wahrscheinlich die gesamte Tabelle zusammen mit der Suchleiste neu rendern, wenn Sie sie eingeben. Versuchen Sie vielleicht, die Tabelle in eine Unterkomponente zu setzen, die shouldComponentUpdate() implementiert. Sollen die Tabellendaten dynamisch aktualisiert werden, wenn Sie ein Zeichen in die Eingabe eingeben? Das könnte teuer sein, Sie könnten auch erwägen, die Tabelle nur neu zu rendern, wenn ein Benutzer auf die Schaltfläche "Suchen" bei der Eingabe klickt.

Anstatt um den heißen Brei herumzuprobieren, um herauszufinden, ob es sich um ein Rendering-Problem handelt, empfehle ich die Verwendung des React performance tools *. Benchmarking hat a solid blog post, die durch den Prozess der Leistung Debugging in React läuft, aber die Magie ist Perf.printWasted(). Es zeigt Ihnen, wie viel Zeit für das erneute Rendern von Komponenten aufgewendet wurde, die nach dem Rendern gleich waren (z. B. Ihre Tabelle, wenn Sie nur die Texteingabe ändern). Prüfschritte:

1. der Konsole ausführen: Perf.start()
2. geben Sie Ihre Eingabe, im Idealfall nur einem Tastendruck
3. Konsole: Perf.stop()
4. Konsole: Perf.printWasted()

Diese Methode ist super schmerzlos, aber Sie können auch use the Chrome profiling tools die gleichen Informationen herausfinden.

* Ich habe gerade herausgefunden, dass sie im heiß reagierten React 16 veraltet sind, aber Sie verwenden wahrscheinlich immer noch eine 15.x-Variante, die gut funktioniert.

Auch +1 für reaktiv-virtualisiert! Es ist ausgezeichnet, unterstützt viele Spalten und Layouts.

Answer 2

Wenn ich dich richtig verstanden habe, ist dein Problem nicht die Menge der Daten - Problem im DOM-Rendering.

Ich denke, die beste Lösung für Sie wird sein, nur sichtbaren Teil der Tabelle zu rendern. Versuchen Sie zum Beispiel, this library oder ähnliches zu verwenden.