FixedSizeList: Tausende Elemente rendern

Sie fügen react-window mit Ihrem Package-Manager zu einem Projekt hinzu, indem Sie beispielsweise das Paket react-window installieren. Es ist klein und hat keine umfangreichen Abhängigkeiten.

Nach der Installation importieren Sie die benötigten Listenkomponenten, meistens FixedSizeList für Zeilen mit einheitlicher Höhe.

FixedSizeList benötigt mehrere Props, um zu funktionieren: height und width definieren den Scrollcontainer, itemCount gibt die Anzahl der Elemente an und itemSize die Höhe jeder Zeile in Pixeln.

Die children-Prop ist eine Render-Funktion, die eine einzelne Zeile zeichnet. Damit kennt die Komponente die Geometrie, die sie für korrektes Windowing benötigt.

Die children-Render-Funktion erhält ein Objekt mit index und style. index gibt an, welches Element gerendert werden soll, sodass Sie die passenden Daten nachschlagen können. style positioniert die Zeile innerhalb der virtuellen Liste.

Sie geben das JSX für diese einzelne Zeile zurück, und react-window ruft die Funktion nur für die Zeilen auf, die sich aktuell im sichtbaren Fenster befinden.

Die style-Prop ist unverzichtbar und muss auf das Zeilenelement angewendet werden. react-window positioniert jede Zeile absolut und verwendet top, um sie an der richtigen Stelle innerhalb eines hohen Scrollcontainers zu platzieren.

Ohne die Anwendung von style würden sich alle Zeilen an derselben Position stapeln und die Virtualisierung würde visuell zusammenbrechen.

Der häufigste Fehler bei react-window besteht darin, die style-Prop für die Zeile wegzulassen. Die Liste wirkt dann fehlerhaft: Die Zeilen überlagern sich oben und das Scrollen funktioniert nicht korrekt.

Übernehmen Sie den bereitgestellten style immer mit Spread-Syntax oder weisen Sie ihn dem äußersten Element Ihrer Zeile zu, damit die Positionierung korrekt bleibt.

Statt Ihr Array in der Render-Funktion über eine Closure verfügbar zu machen, können Sie es über die itemData-Prop übergeben. react-window reicht es dann als data-Feld zusammen mit index und style an die Zeile weiter.

Dadurch bleibt die Zeilenkomponente entkoppelt, und die Memoisierung kann erleichtert werden, da die Zeile ihre Daten explizit erhält.

FixedSizeList unterstützt horizontale Listen über die auf horizontal gesetzte layout-Prop oder je nach Version über die direction-Optionen. itemSize bezeichnet dann die Breite statt der Höhe.

Das ist praktisch für horizontal scrollende Karussells oder Zeitleisten, die ebenfalls viele Elemente enthalten.

Die overscanCount-Prop rendert einige zusätzliche Zeilen direkt außerhalb des sichtbaren Fensters. Dieser Puffer verringert beim schnellen Scrollen die Wahrscheinlichkeit, dass kurzzeitig leerer Raum sichtbar wird, bevor neue Zeilen gemountet werden.

Ein kleiner Overscan sorgt für ein flüssigeres Erlebnis, während ein großer Overscan den Vorteil zunichtemacht, weil zu viele nicht sichtbare Zeilen gemountet werden.

FixedSizeList benötigt explizite Pixelmaße, was in responsiven Layouts unpraktisch ist. Die begleitende AutoSizer-Komponente misst ihren übergeordneten Container und übergibt width und height über eine Render-Prop an die Liste.

Wenn Sie die Liste in AutoSizer einschließen, kann sie einen flexiblen Container ausfüllen, ohne dass Sie Größen fest codieren müssen. Sie passt sich an Änderungen des Layouts an.

Eine funktionierende FixedSizeList setzt height, width, itemCount und itemSize und rendert Zeilen über eine children-Funktion, die die style-Prop anwendet. Optional kann AutoSizer die Abmessungen bereitstellen, und overscanCount fügt einen Puffer hinzu.

Damit bleiben bei einer Liste beliebiger Länge während des Scrollens nur die sichtbaren Zeilen gemountet, während das Scrollen flüssig bleibt.

Rufen Sie sich ins Gedächtnis, welche Angaben FixedSizeList benötigt, um Zeilen korrekt zu rendern.

FixedSizeList rendert gleich hohe Zeilen mithilfe von height, width, itemCount, itemSize und einer children-Render-Funktion, die index und style erhält. Die style-Prop muss angewendet werden, sonst überlagern sich die Zeilen.

Übergeben Sie Daten über itemData, unterstützen Sie ein horizontales Layout, fügen Sie mit einer kleinen overscanCount einen Puffer hinzu und verwenden Sie AutoSizer, um responsive Container ohne fest codierte Abmessungen auszufüllen.