Łączenie wirtualizacji z pobieraniem danych

Nieskończone przewijanie ładuje więcej danych, gdy użytkownik zbliża się do końca listy, zamiast korzystać z paginacji za pomocą jawnych przycisków stron. W połączeniu z wirtualizacją umożliwia płynne przeglądanie ogromnych zbiorów danych.

Lista wyświetla tylko widoczne wiersze, a nowe dane są pobierane w tle tuż przed dotarciem użytkownika do dołu.

Komponenty listy react-window przyjmują wywołanie zwrotne onItemsRendered, które informuje, jakie indeksy elementów są obecnie renderowane. Udostępnia ono początkowe i końcowe indeksy widocznego obszaru oraz obszaru overscanu.

To wywołanie zwrotne jest punktem podłączenia do przewijania. Umożliwia określenie, jak daleko użytkownik przewinął listę, bez podłączania surowych zdarzeń przewijania.

Aby wiedzieć, kiedy pobrać dane, należy porównać overscanStopIndex z onItemsRendered z bieżącą wartością itemCount. Gdy renderowane okno zbliża się do końca załadowanych danych, potrzebne są kolejne dane.

Użycie indeksu końca overscanu zapewnia niewielki zapas czasu i uruchamia pobieranie nieco wcześniej, zanim użytkownik rzeczywiście dotrze do ostatniego wiersza.

Gdy indeks końcowy przekroczy próg, na przykład znajdzie się w odległości nie większej niż jeden ekran od itemCount, należy wywołać funkcję pobierającą dane dla następnej strony. Trzeba ją zabezpieczyć, aby nie uruchamiać wielu nakładających się żądań.

Flaga ładowania lub sprawdzenie, czy pobieranie już trwa, zapobiega zduplikowanym żądaniom podczas przewijania przez obszar wyzwalania.

Praktycznym rozwiązaniem jest ustawienie itemCount na liczbę załadowanych elementów powiększoną o jeden, dopóki istnieją jeszcze dane. Dodatkowy wiersz wyświetla spinner, sygnalizując, że trwa pobieranie.

Po nadejściu nowych danych licznik rośnie, a wiersz ze spinnerem zostaje zastąpiony rzeczywistą zawartością, zapewniając płynną informację wizualną.

Towarzyszący pakiet react-window-infinite-loader przejmuje tę logikę. Należy przekazać mu isItemLoaded, loadMoreItems i itemCount, a będzie wywoływać funkcję ładującą, gdy użytkownik przewija w kierunku niezaładowanych wierszy.

Pakiet obsługuje śledzenie załadowanych zakresów i zapobiega redundantnym wywołaniom ładowania, upraszczając niezawodne nieskończone przewijanie.

Dla niezaładowanych indeksów można renderować wiersze zastępcze lub szkieletowe zamiast pustych miejsc. Funkcja renderująca sprawdza, czy element o danym indeksie został załadowany, i jeśli nie, wyświetla szkielet.

Szkielety zachowują układ i informują o postępie, dzięki czemu oczekiwanie na następną stronę jest przyjemniejsze niż oglądanie pustej przestrzeni.

Pobieranie może się nie powieść, dlatego należy obsługiwać błędy w elegancki sposób. Na końcu można wyświetlić specjalny wiersz błędu z przyciskiem ponowienia, który ponownie wywołuje funkcję ładowania dla nieudanego zakresu.

Dzięki temu lista pozostaje użyteczna po chwilowym problemie, a użytkownik otrzymuje jasny sposób na odzyskanie działania bez ponownego ładowania całej strony.

Dwa popularne style paginacji dostarczają dane do nieskończonych list. Paginacja offsetowa wysyła żądania na podstawie numeru strony lub liczby pomijanych elementów, natomiast paginacja kursorowa żąda elementów znajdujących się za nieprzezroczystym kursorem wskazującym ostatnio wyświetlony element.

Paginacja kursorowa jest zazwyczaj bardziej niezawodna w przypadku aktualizowanych na bieżąco danych, ponieważ unika przesunięć i duplikatów, które paginacja offsetowa może powodować po wstawieniu nowych elementów.

React Query useInfiniteQuery naturalnie współpracuje z wirtualizacją. Zarządza pobranymi stronami, następnym kursorem oraz stanami ładowania i błędu, podczas gdy react-window wydajnie renderuje spłaszczone strony.

Strony należy spłaszczyć do jednej tablicy na potrzeby listy, a następnie wywołać fetchNextPage po osiągnięciu progu w onItemsRendered, zyskując bez dodatkowej pracy buforowanie i ponawianie prób.

Określ, kiedy należy pobrać więcej danych w zwirtualizowanej nieskończonej liście.

Nieskończone przewijanie ładuje strony, gdy użytkownik zbliża się do końca. onItemsRendered zgłasza indeksy, a porównanie overscanStopIndex z itemCount wskazuje, kiedy należy pobrać dane, z zabezpieczeniem przed zduplikowanymi żądaniami.

Należy używać wierszy zastępczych i błędów, pakietu react-window-infinite-loader do śledzenia stanu oraz paginacji kursorowej dla aktualizowanych na bieżąco danych. React Query useInfiniteQuery zarządza stronami, kursorami i stanami, a react-window zajmuje się renderowaniem.