Zbuduj infinite scroll w React małym hookiem z IntersectionObserver, bez żadnego pakietu, a potem utrzymaj szybkość długich list dzięki wirtualizacji. Dema na żywo i kod do skopiowania.
Umieść pusty element strażnika (sentinel) za ostatnim elementem i obserwuj go przez IntersectionObserver. Gdy znajdzie się kilkaset pikseli od viewportu, pobierz następną stronę i dołącz ją. Dwudziestolinijkowy hook robi to bez biblioteki. Gdy lista dojdzie do tysięcy wierszy, dodaj wirtualizację, aby w DOM istniały tylko widoczne wiersze.
Opcje IntersectionObserver ważne dla infinite scroll
Oba dema poniżej działają na tej stronie. Pierwsze ładuje udawane strony wyników, gdy przewijasz jego panel, drugie przewija dziesięć tysięcy wierszy, rysując tylko około dwudziestu, które widzisz. Kod każdego z nich jest pod spodem, gotowy do skopiowania.
Nie. IntersectionObserver jest dostępny we wszystkich głównych przeglądarkach od 2019, a mały hook obejmuje typowy przypadek. Biblioteka do pobierania danych z wbudowanymi pomocnikami paginacji ma sens, gdy już używasz jej do cache'owania żądań.
Wirtualizacja renderuje tylko wiersze w widocznym oknie plus mały bufor, umieszczone w elemencie dystansowym o pełnej wysokości listy. Sięgnij po nią, gdy DOM zawiera tysiące wierszy, a przewijanie lub pisanie zaczyna się przycinać. @tanstack/react-virtual i jego hook useVirtualizer to popularny wybór.
Roboty wyszukiwarek nie przewijają tak jak ludzie, więc treść, która pojawia się dopiero po przewinięciu, może nigdy nie zostać zauważona. Oprzyj listę na prawdziwych adresach z paginacją, takich jak ?page=2, które ładują się samodzielnie, i linkuj do nich.
Zwykle efekt tworzy observer od nowa przy każdym renderze, bo callback zmienia tożsamość, albo pierwsza strona jest za krótka, by wypchnąć strażnika poza ekran. Trzymaj najnowszy callback w ref i upewnij się, że każda strona wypełnia więcej niż viewport.
Zwraca ref dla strażnika. Najnowszy onLoadMore jest trzymany w ref, więc observer jest tworzony raz przy każdej zmianie enabled, a nie przy każdym renderze.
Flaga loading zapobiega podwójnym żądaniom, a hasMore wyłącza observer na końcu.
Zainstaluj przez npm install @tanstack/react-virtual. Zewnętrzne pole się przewija, wewnętrzne ma wysokość całej listy, a każdy widoczny wiersz jest ustawiany na miejscu przez translateY.
Renderowane są tylko wiersze blisko widocznego okna. estimateSize to wysokość wiersza w pikselach.
Demo: lista, która ładuje się podczas przewijania
Przewijaj wewnątrz panelu. Za każdym razem, gdy strażnik znajdzie się w zasięgu, pojawia się nowa strona z dziesięcioma elementami, maksymalnie osiem stron.
Demo listy
Post {n}
Ładowanie...
To już koniec.
Załaduj więcej
{items} elementów, strona {page} z {last}
Resetuj
Demo: 10,000 wierszy, renderowane tylko widoczne
Przewijaj listę i zobacz, jak mało wierszy faktycznie istnieje na stronie w danej chwili.
Demo listy wirtualnej
Wiersz {n}
Renderowanie {shown} z {total} wierszy
Zacznij za darmo · Bez karty kredytowej