Optimieren der Leistung von React-Anwendungen: Eine effiziente Möglichkeit, eine große Anzahl von Projekten zu rendern

Question

Ich entwickle eine React-Anwendung und muss eine große Liste von Elementen (Tausende Zeilen) anzeigen. Derzeit ist die Leistung sehr langsam, wenn der Benutzer durch die Liste scrollt oder Elemente filtert. Gibt es eine Möglichkeit, die Leistung meiner React-Anwendung zu optimieren, um die Benutzererfahrung zu verbessern?

Einige zusätzliche Informationen:

– Ich verwende React-Funktionskomponenten und Hooks, um eine Liste von Elementen zu rendern. - Jedes Element in der Liste enthält mehrere Datenfelder, einschließlich Text und Bilder.

- Ich verwende derzeit die integrierte Kartenfunktion, um eine Liste von Elementen darzustellen.

– Ich verwende eine Bibliothek, um das Filtern und Sortieren einer Liste von Elementen zu verwalten.

- Ich habe versucht, ShouldComponentUpdate und React.memo zu verwenden, um die Leistung zu verbessern, aber es ist immer noch nicht schnell genug.

Ich bin offen für alle Vorschläge, einschließlich der Verwendung von Bibliotheken von Drittanbietern oder des Umschreibens von Teilen der Anwendung, falls erforderlich. Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

你可以使用库react-window。它对于在大量元素的列表中虚拟化滚动非常有用，并且应该帮助你进行性能调优。