Sehr große Tabellen und Listen können die Leistung Ihrer Website erheblich verlangsamen. Virtualisierung kann helfen.
react-window ist eine Bibliothek, mit der sich große Listen effizient rendern lassen.
Hier sehen Sie ein Beispiel für eine Liste mit 1.000 Zeilen, die mit react-window gerendert wird. Scrollen Sie so schnell wie möglich.
Welchen Nutzen bieten sie?
Manchmal müssen Sie möglicherweise eine große Tabelle oder Liste mit vielen Zeilen anzeigen. Das Laden jedes einzelnen Elements in einer solchen Liste kann die Leistung erheblich beeinträchtigen.
Bei der Listenvirtualisierung oder dem „Windowing“ wird nur das gerendert, was für den Nutzer sichtbar ist. Die Anzahl der Elemente, die zuerst gerendert werden, ist eine sehr kleine Teilmenge der gesamten Liste. Das „Fenster“ mit sichtbaren Inhalten bewegt sich, wenn der Nutzer weiter scrollt. Dadurch wird sowohl die Rendering- als auch die Scrollleistung der Liste verbessert.