VariableSizeList: dynamiska radhöjder

Ibland är raderna inte enhetliga: en chattlista kan blanda korta och långa meddelanden, eller ett flöde kan innehålla kort med varierande innehåll. FixedSizeList kan inte hantera detta eftersom den förutsätter ett konstant itemSize.

För sådana fall erbjuder react-window en listtyp där varje objekt kan ange sin egen storlek.

VariableSizeList fungerar som FixedSizeList men accepterar en storlek per objekt. Du importerar den i stället och anger en funktion som returnerar storleken för ett givet index.

Allt annat, renderfunktionen children och den kritiska proppen style, förblir detsamma, så migreringen blir liten.

Med VariableSizeList är itemSize en funktion som tar ett index och returnerar radens höjd i pixlar. react-window anropar den för att beräkna förskjutningar och avgöra det synliga fönstret.

Det gör att du kan ange kända höjder, till exempel högre rader för objekt med bilder och kortare rader för vanlig text.

Om du känner till varje rads höjd i förväg kan du returnera den direkt från funktionen itemSize. Om höjderna beror på det renderade innehållet måste du mäta raderna efter att de har ritats upp.

Förberäknade höjder är enklast och snabbast. Uppmätta höjder är mer flexibla, men kräver extra arbete för att skicka tillbaka storlekarna till listan.

VariableSizeList cachar objektens förskjutningar. När en uppmätt höjd ändras måste du anropa listans resetAfterIndex-metod via dess ref så att positionerna beräknas om från och med det indexet.

Om du glömmer detta blir förskjutningarna inaktuella och raderna feljusterade, så resetAfterIndex är nyckeln till att få dynamisk mätning att fungera.

Det uppstår ett moment 22: du behöver en höjd för att kunna rendera raden, men den verkliga höjden känner du först till efter att raden har renderats. Listan måste placera raden innan den kan mätas.

För att lösa detta renderar du först med en uppskattning och korrigerar sedan när den riktiga höjden är känd.

Det vanliga mönstret är att rendera raderna med en uppskattad höjd, mäta deras faktiska höjd efter att de har ritats upp med hjälp av en ref eller ResizeObserver, spara det uppmätta värdet och anropa resetAfterIndex för att uppdatera positionerna.

Den här loopen konvergerar snabbt, så listan stabiliseras med korrekta förskjutningar efter den första mätningen.

Funktionen itemSize bör vara stabil mellan renderingar, vanligtvis genom att omslutas av useCallback, så att listan inte hela tiden ogiltigförklarar sina cachade förskjutningar.

En instabil funktion som definieras inline kan tvinga fram onödiga omberäkningar och försämra den prestanda som virtualiseringen är avsedd att ge.

VariableSizeList gör mer arbete än FixedSizeList eftersom den inte kan förutsätta en konstant offset och måste hålla reda på storleken för varje objekt. När höjderna mäts medför den extra mätningen också en kostnad.

För listor där raderna faktiskt varierar är den här kostnaden värd det; för enhetliga rader är FixedSizeList fortfarande det snabbare och enklare valet.

Om exakt dynamisk mätning blir för kostsam kan du ibland göra en uppskattning. Genom att dela in rader i ett fåtal fasta höjdklasser, eller använda ett rimligt genomsnitt, kan du fortsätta använda FixedSizeList.

Detta byter pixelperfekt layout mot enkelhet och snabbhet – en acceptabel kompromiss när mindre avvikelser i offset är tolererbara.

VariableSizeList hanterar rader med olika höjd genom att ta itemSize som en funktion av index. Höjder kan beräknas i förväg eller mätas; uppmätta höjder kräver loopen uppskatta–rendera–mäta–uppdatera med resetAfterIndex.

Håll itemSize-funktionen stabil med useCallback. Den kostar mer än FixedSizeList, så för enhetliga rader eller när en approximation räcker bör du föredra den fasta varianten.