VariableSizeList: Dynamiske radhøyder

Noen ganger har radene ulik størrelse: En chatliste kan blande korte og lange meldinger, eller en feed kan ha kort med varierende innhold. FixedSizeList kan ikke håndtere dette fordi den antar én konstant itemSize.

I slike tilfeller tilbyr react-window en listetype som lar hvert element oppgi sin egen størrelse.

VariableSizeList fungerer som FixedSizeList, men godtar en størrelse per element. De importerer den i stedet og oppgir en funksjon som returnerer størrelsen for en gitt index.

Alt annet, både children-render-funksjonen og den kritiske style-propen, forblir likt, så overgangen er liten.

Med VariableSizeList er itemSize en funksjon som tar en index og returnerer høyden på raden i piksler. react-window kaller den for å beregne forskyvninger og avgjøre det synlige vinduet.

Dette lar Dem angi kjente høyder, for eksempel høyere rader for elementer med bilder og kortere rader for ren tekst.

Hvis De kjenner høyden på hver rad på forhånd, kan De returnere den direkte fra itemSize-funksjonen. Hvis høydene avhenger av det renderte innholdet, må De måle radene etter at de er tegnet.

Forhåndsberegnede høyder er enklest og raskest. Målte høyder er mer fleksible, men krever ekstra arbeid for å sende størrelsene tilbake til listen.

VariableSizeList mellomlagrer elementforskyvninger for bedre ytelse. Når en målt høyde endres, må De kalle resetAfterIndex-metoden på ref-en til listen, slik at den beregner posisjonene på nytt fra og med denne index-en.

Hvis De glemmer dette, blir forskyvningene utdaterte og radene feiljustert. resetAfterIndex er derfor nøkkelen til å få dynamisk måling til å fungere.

Her oppstår et høna-og-egget-problem: De trenger en høyde for å rendre raden, men kjenner først den faktiske høyden etter at raden er rendret. Listen må plassere raden før den kan måle den.

Dette løses ved å rendre med et estimat først, og deretter korrigere når den faktiske høyden er kjent.

Det vanlige mønsteret er å rendre rader med en estimert høyde, måle den faktiske høyden etter rendering ved hjelp av en ref eller ResizeObserver, lagre den målte verdien og kalle resetAfterIndex for å oppdatere posisjonene.

Denne løkken konvergerer raskt, slik at listen finner riktige forskyvninger etter den første målerunden.

itemSize-funksjonen bør være stabil mellom renderingene, vanligvis pakket inn i useCallback, slik at listen ikke hele tiden ugyldiggjør de mellomlagrede forskyvningene.

En ustabil funksjon som defineres inline, kan tvinge frem unødvendige beregninger på nytt og svekke ytelsen som virtualiseringen skulle gi.

VariableSizeList gjør mer arbeid enn FixedSizeList fordi den ikke kan anta et konstant offset og må holde oversikt over størrelsen på hvert element. Når høydene måles, medfører den ekstra målingen også en kostnad.

For lister der radene faktisk varierer, er denne kostnaden verdt det. For ensartede rader er FixedSizeList fortsatt det raskere og enklere valget.

Hvis nøyaktig dynamisk måling blir for kostbar, kan du noen ganger bruke en tilnærming. Ved å dele radene inn i noen få faste høydeklasser eller bruke et fornuftig gjennomsnitt kan du fortsette å bruke FixedSizeList.

Dette bytter pikselperfekt layout mot enkelhet og hastighet, og er et akseptabelt kompromiss når små unøyaktigheter i offset kan tolereres.

VariableSizeList håndterer rader med ulik høyde ved å ta itemSize som en funksjon av indeksen. Høydene kan beregnes på forhånd eller måles. Målte høyder krever sløyfen estimer–render–mål–oppdater med resetAfterIndex.

Hold itemSize-funksjonen stabil med useCallback. Den koster mer enn FixedSizeList, så for ensartede rader, eller når en tilnærming er tilstrekkelig, bør du foretrekke den faste varianten.