VariableSizeList: dynamiczne wysokości wierszy

Czasami wiersze nie są jednakowe: lista czatu zawiera krótkie i długie wiadomości albo strumień danych ma karty o różnej zawartości. FixedSizeList nie może sobie z tym poradzić, ponieważ zakłada jedną stałą wartość itemSize.

W takich przypadkach react-window oferuje typ listy, który pozwala każdemu elementowi określić własny rozmiar.

VariableSizeList działa podobnie jak FixedSizeList, ale przyjmuje rozmiar określany osobno dla każdego elementu. Zamiast FixedSizeList importuje się VariableSizeList i przekazuje funkcję zwracającą rozmiar dla dowolnego indeksu.

Cała reszta — funkcja renderująca children oraz kluczowa właściwość style — pozostaje taka sama, dlatego migracja jest niewielka.

W przypadku VariableSizeList itemSize jest funkcją, która przyjmuje indeks i zwraca wysokość danego wiersza w pikselach. react-window wywołuje ją, aby obliczyć przesunięcia i określić widoczne okno.

Pozwala to zdefiniować znane wysokości, na przykład wyższe wiersze dla elementów z obrazami i niższe dla zwykłego tekstu.

Jeśli z góry wiadomo, jaka jest wysokość każdego wiersza, można zwrócić ją bezpośrednio z funkcji itemSize. Jeśli wysokość zależy od wyrenderowanej zawartości, wiersze trzeba zmierzyć po ich narysowaniu.

Wysokości obliczone z góry są najprostsze i najszybsze, natomiast wysokości mierzone są bardziej elastyczne, ale wymagają dodatkowej pracy, aby przekazać rozmiary z powrotem do listy.

VariableSizeList buforuje przesunięcia elementów w celu zwiększenia wydajności. Gdy zmierzona wysokość ulegnie zmianie, należy wywołać metodę resetAfterIndex na ref listy, aby ponownie obliczyć pozycje od tego indeksu wzwyż.

Pominięcie tego kroku pozostawia nieaktualne przesunięcia i powoduje nieprawidłowe wyrównanie wierszy, dlatego resetAfterIndex jest kluczem do działania pomiaru dynamicznego.

Występuje problem kury i jajka: aby wyrenderować wiersz, potrzebna jest jego wysokość, ale rzeczywistą wysokość można poznać dopiero po jego wyrenderowaniu. Lista musi umieścić wiersz, zanim będzie można go zmierzyć.

Rozwiązanie wymaga najpierw renderowania z wartością szacunkową, a następnie skorygowania jej po poznaniu rzeczywistej wysokości.

Standardowy wzorzec polega na renderowaniu wierszy z szacowaną wysokością, zmierzeniu ich rzeczywistej wysokości po narysowaniu za pomocą ref lub ResizeObserver, zapisaniu zmierzonej wartości i wywołaniu resetAfterIndex w celu zaktualizowania pozycji.

Pętla ta szybko zbiega, więc po pierwszym przejściu pomiarowym lista ustala prawidłowe przesunięcia.

Funkcja itemSize powinna zachowywać stabilność między renderowaniami. Zwykle opakowuje się ją w useCallback, aby lista nie unieważniała ciągle buforowanych przesunięć.

Niestabilna funkcja zdefiniowana bezpośrednio w kodzie może wymuszać zbędne ponowne obliczenia, pogarszając wydajność, którą wirtualizacja ma zapewniać.

VariableSizeList wykonuje więcej pracy niż FixedSizeList, ponieważ nie może założyć stałego przesunięcia i musi śledzić rozmiary poszczególnych elementów. Gdy wysokości są mierzone, dodatkowy pomiar również zwiększa koszt.

W przypadku list, których wiersze rzeczywiście mają różne wysokości, ten koszt się opłaca; dla jednolitych wierszy FixedSizeList pozostaje szybszym i prostszym wyborem.

Jeśli dokładny pomiar dynamiczny jest zbyt kosztowny, czasami można zastosować przybliżenie. Podział wierszy na kilka klas o stałej wysokości albo użycie rozsądnej wartości średniej może pozwolić na pozostanie przy FixedSizeList.

To kompromis między układem idealnie zgodnym co do piksela a prostotą i szybkością — akceptowalny, gdy niewielkie niedokładności przesunięcia są tolerowane.

Przypomnij sobie, jak VariableSizeList poznaje wysokość każdego wiersza.

VariableSizeList obsługuje wiersze o różnych wysokościach, przyjmując itemSize jako funkcję indeksu. Wysokości można obliczyć wcześniej albo zmierzyć; zmierzone wysokości wymagają pętli szacowanie–renderowanie–pomiar–aktualizacja z użyciem resetAfterIndex.

Należy utrzymywać stabilność funkcji itemSize za pomocą useCallback. Kosztuje ona więcej niż FixedSizeList, dlatego w przypadku jednolitych wierszy lub gdy wystarczy przybliżenie należy wybrać wariant stały.