FixedSizeList: renderowanie tysięcy elementów

Pakiet react-window dodaje się do projektu za pomocą menedżera pakietów, na przykład instalując pakiet react-window. Jest niewielki i nie ma ciężkich zależności.

Po instalacji importuje się potrzebne komponenty listy, najczęściej FixedSizeList dla wierszy, które mają taką samą wysokość.

FixedSizeList wymaga kilku właściwości, aby działać: height i width definiują kontener przewijania, itemCount określa liczbę elementów, a itemSize wysokość każdego wiersza w pikselach.

Właściwość children jest funkcją renderującą, która rysuje pojedynczy wiersz. Dzięki tym informacjom komponent zna geometrię potrzebną do prawidłowego okienkowania.

Funkcja renderująca children otrzymuje obiekt zawierający index i style. index wskazuje, który element należy wyrenderować, dzięki czemu można odczytać właściwe dane, a style umieszcza wiersz na odpowiedniej pozycji na wirtualizowanej liście.

Zwraca się JSX dla pojedynczego wiersza, a react-window wywołuje tę funkcję tylko dla wierszy znajdujących się aktualnie w widocznym oknie.

Właściwość style jest niezbędna i musi zostać zastosowana do elementu wiersza. react-window pozycjonuje każdy wiersz absolutnie, używając top do umieszczenia go na właściwym przesunięciu wewnątrz wysokiego kontenera przewijania.

Bez zastosowania style wszystkie wiersze ułożyłyby się w tej samej pozycji, a wirtualizacja przestałaby być widoczna.

Najczęstszym błędem w react-window jest pominięcie właściwości style w wierszu. Lista będzie wyglądać na zepsutą: wiersze nałożą się u góry, a przewijanie będzie działać nieprawidłowo.

Zawsze należy rozpropagować otrzymaną właściwość style na najbardziej zewnętrzny element wiersza albo przypisać ją do niego, aby zachować prawidłowe pozycjonowanie.

Zamiast przechwytywać tablicę w zakresie funkcji renderującej, można przekazać ją przez właściwość itemData. react-window przekaże ją następnie do wiersza jako pole data, obok index i style.

Dzięki temu komponent wiersza pozostaje niezależny, co może również pomóc w memoizacji, ponieważ otrzymuje dane jawnie.

FixedSizeList obsługuje listy poziome za pomocą właściwości layout ustawionej na horizontal albo — zależnie od wersji — za pomocą opcji direction. W takim przypadku itemSize oznacza szerokość zamiast wysokości.

Jest to przydatne w przypadku przewijanych poziomo karuzel lub osi czasu, które również zawierają wiele elementów.

Właściwość overscanCount renderuje kilka dodatkowych wierszy tuż poza widocznym oknem. Ten bufor zmniejsza ryzyko pojawienia się pustego miejsca podczas szybkiego przewijania, zanim zostaną zamontowane nowe wiersze.

Niewielki overscan poprawia płynność, natomiast duży niweluje korzyści, ponieważ powoduje zamontowanie zbyt wielu wierszy poza ekranem.

FixedSizeList wymaga jawnych wymiarów w pikselach, co jest kłopotliwe w responsywnych układach. Towarzyszący komponent AutoSizer mierzy element nadrzędny i przekazuje do listy wartości width i height za pomocą właściwości render.

Umieszczenie listy w AutoSizer pozwala wypełnić elastyczny kontener bez ręcznego wpisywania wymiarów, a także dostosowywać się do zmian układu.

Działający FixedSizeList ustawia height, width, itemCount i itemSize oraz renderuje wiersze za pomocą funkcji children, która stosuje właściwość style. Opcjonalnie AutoSizer dostarcza wymiary, a overscanCount dodaje bufor.

Po skonfigurowaniu lista dowolnej długości utrzymuje zamontowane tylko widoczne wiersze, a przewijanie pozostaje płynne.

Przypomnij sobie, jakie informacje należy przekazać FixedSizeList, aby prawidłowo renderować wiersze.

FixedSizeList renderuje wiersze o jednakowej wysokości, korzystając z height, width, itemCount, itemSize oraz funkcji renderującej children, która otrzymuje index i style. Zastosowanie właściwości style jest obowiązkowe, w przeciwnym razie wiersze nałożą się na siebie.

Dane można przekazywać za pomocą itemData, obsługiwać układ poziomy, dodawać niewielki bufor overscanCount oraz używać AutoSizer do wypełniania responsywnych kontenerów bez ręcznego wpisywania wymiarów.