FixedSizeList: Rendering af tusindvis af elementer

Du tilføjer react-window til et projekt med din pakkehåndtering, for eksempel ved at installere pakken react-window. Den er lille og har ingen tunge afhængigheder.

Når pakken er installeret, importerer du de listekomponenter, du har brug for, oftest FixedSizeList til rækker, der alle har samme højde.

FixedSizeList skal have flere props for at fungere: height og width definerer rullecontaineren, itemCount angiver antallet af elementer, og itemSize er højden på hver række i pixels.

children-proppen er en gengivelsesfunktion, der tegner en enkelt række. Med disse oplysninger kender komponenten den geometri, den skal bruge for at anvende vinduesteknik korrekt.

children-gengivelsesfunktionen modtager et objekt med index og style. index angiver, hvilket element der skal gengives, så du kan finde de rigtige data, og style placerer rækken i den virtualiserede liste.

Du returnerer JSX for den enkelte række, og react-window kalder kun funktionen for de rækker, der aktuelt befinder sig i vinduet.

style-proppen er afgørende og skal anvendes på dit rækkeelement. react-window placerer hver række absolut og bruger top til at placere den ved den korrekte forskydning i en høj rullecontainer.

Hvis du ikke anvender style, stables alle rækker på samme position, og virtualiseringen bryder visuelt sammen.

Den mest almindelige fejl i react-window er at udelade style-proppen på rækken. Listen ser ødelagt ud, fordi rækkerne overlapper øverst, og rulningen fungerer forkert.

Spred altid den angivne style ud på, eller tildel den til, det yderste element i din række, så placeringen forbliver korrekt.

I stedet for at bruge dit array direkte i gengivelsesfunktionen kan du sende det gennem itemData-proppen. react-window videresender det derefter til rækken som et datafelt sammen med index og style.

Det holder række-komponenten afkoblet og kan hjælpe med memo-isering, fordi rækken modtager sine data eksplicit.

FixedSizeList understøtter vandrette lister via layout-proppen sat til horizontal eller ved at bruge retningsindstillingerne, afhængigt af versionen. itemSize repræsenterer så bredden i stedet for højden.

Det er praktisk til vandret rullende karuseller eller tidslinjer, der også indeholder mange elementer.

overscanCount-proppen gengiver nogle få ekstra rækker lige uden for det synlige vindue. Denne buffer mindsker risikoen for, at du ser tom plads under hurtig rulning, før nye rækker monteres.

En lille overscan gør oplevelsen jævnere, mens en stor overscan spilder fordelen ved at montere for mange rækker uden for skærmen.

FixedSizeList kræver eksplicitte mål i pixels, hvilket er upraktisk i responsive layouts. Den tilhørende AutoSizer-komponent måler sit overordnede element og leverer width og height til listen via en gengivelsesprop.

Hvis du pakker listen ind i AutoSizer, kan den udfylde en fleksibel container uden fastkodede størrelser og tilpasse sig, når layoutet ændres.

En fungerende FixedSizeList angiver height, width, itemCount og itemSize og gengiver rækker gennem en children-funktion, der anvender style-proppen. Du kan valgfrit lade AutoSizer levere målene og bruge overscanCount til at tilføje en buffer.

Med dette på plads holder en liste af enhver længde kun de synlige rækker monteret, mens rulningen forbliver jævn.

FixedSizeList gengiver rækker med samme højde ved hjælp af height, width, itemCount, itemSize og en children-gengivelsesfunktion, der modtager index og style. Det er obligatorisk at anvende style-proppen, ellers overlapper rækkerne.

Send data via itemData, understøt vandret layout, tilføj en lille buffer med overscanCount, og brug AutoSizer til at udfylde responsive containere uden fastkodede mål.