VariableSizeList: dynamische Zeilenhöhen

Manchmal sind Zeilen nicht einheitlich: Eine Chatliste enthält kurze und lange Nachrichten, oder ein Feed hat Karten mit unterschiedlich viel Inhalt. FixedSizeList kann damit nicht umgehen, da es von einer konstanten itemSize ausgeht.

Für diese Fälle bietet react-window einen Listentyp, bei dem jedes Element seine eigene Größe angeben kann.

VariableSizeList funktioniert wie FixedSizeList, akzeptiert aber eine individuelle Größe pro Element. Sie importieren stattdessen diese Komponente und stellen eine Funktion bereit, die für einen beliebigen index die entsprechende Größe zurückgibt.

Alles andere, also die children-Render-Funktion und die wichtige style-Prop, bleibt unverändert. Die Migration ist daher klein.

Bei VariableSizeList ist itemSize eine Funktion, die einen index entgegennimmt und die Höhe der entsprechenden Zeile in Pixeln zurückgibt. react-window ruft sie auf, um Offsets zu berechnen und das sichtbare Fenster zu bestimmen.

So können Sie bekannte Höhen abbilden, beispielsweise größere Zeilen für Elemente mit Bildern und kleinere Zeilen für reinen Text.

Wenn Sie die Höhe jeder Zeile im Voraus kennen, können Sie sie direkt aus der itemSize-Funktion zurückgeben. Wenn die Höhen vom gerenderten Inhalt abhängen, müssen Sie die Zeilen nach dem Rendern messen.

Vorab berechnete Höhen sind am einfachsten und am schnellsten. Gemessene Höhen sind flexibler, erfordern aber zusätzlichen Aufwand, um die Größen an die Liste zurückzugeben.

VariableSizeList cached Element-Offsets aus Performancegründen. Wenn sich eine gemessene Höhe ändert, müssen Sie die resetAfterIndex-Methode über die Ref der Liste aufrufen, damit die Positionen ab diesem index neu berechnet werden.

Wenn Sie dies vergessen, bleiben die Offsets veraltet und die Zeilen falsch ausgerichtet. resetAfterIndex ist daher entscheidend für eine funktionierende dynamische Messung.

Hier besteht ein Henne-Ei-Problem: Sie benötigen eine Höhe, um die Zeile zu rendern, kennen die tatsächliche Höhe aber erst nach dem Rendern. Die Liste muss eine Zeile platzieren, bevor sie gemessen werden kann.

Zur Lösung rendern Sie zunächst mit einer Schätzung und korrigieren die Position anschließend, sobald die tatsächliche Höhe bekannt ist.

Das übliche Muster besteht darin, Zeilen mit einer geschätzten Höhe zu rendern, ihre tatsächliche Höhe nach dem Rendern mithilfe einer Ref oder eines ResizeObserver zu messen, den Messwert zu speichern und resetAfterIndex aufzurufen, um die Positionen zu aktualisieren.

Diese Schleife konvergiert schnell, sodass die Liste nach dem ersten Messdurchlauf korrekte Offsets verwendet.

Die itemSize-Funktion sollte über mehrere Renderdurchläufe hinweg stabil bleiben und typischerweise mit useCallback umschlossen werden, damit die Liste ihre gecachten Offsets nicht ständig ungültig macht.

Eine instabile inline definierte Funktion kann unnötige Neuberechnungen erzwingen und dadurch die Performance beeinträchtigen, die durch Virtualisierung eigentlich verbessert werden soll.

VariableSizeList erledigt mehr Arbeit als FixedSizeList, da es keinen konstanten Offset voraussetzen kann und die Größen der einzelnen Elemente verfolgen muss. Wenn die Höhen gemessen werden, verursacht auch die zusätzliche Messung Kosten.

Bei Listen, deren Zeilen tatsächlich unterschiedlich hoch sind, lohnt sich dieser Aufwand; bei gleichförmigen Zeilen bleibt FixedSizeList die schnellere und einfachere Wahl.

Wenn eine exakte dynamische Messung zu teuer ist, können Sie manchmal mit einer Näherung arbeiten. Wenn Sie Zeilen in einige wenige feste Höhenklassen einteilen oder einen plausiblen Durchschnittswert verwenden, können Sie bei FixedSizeList bleiben.

Das ist ein Tausch von pixelgenauem Layout gegen Einfachheit und Geschwindigkeit – ein akzeptabler Kompromiss, wenn geringfügige Ungenauigkeiten bei den Offsets tolerierbar sind.

Rufen Sie sich ins Gedächtnis, wie VariableSizeList die Höhe jeder Zeile ermittelt.

VariableSizeList verarbeitet Zeilen mit unterschiedlichen Höhen, indem itemSize als Funktion des Index übergeben wird. Die Höhen können vorab berechnet oder gemessen werden; gemessene Höhen erfordern die Schleife aus Schätzen, Rendern, Messen und Aktualisieren mit resetAfterIndex.

Halten Sie die Funktion itemSize mit useCallback stabil. Sie verursacht mehr Aufwand als FixedSizeList. Bei gleichförmigen Zeilen oder wenn eine Näherung ausreicht, sollten Sie daher die feste Variante bevorzugen.