Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.

Czy kiedykolwiek natknąłeś się na stronę internetową lub aplikację, która wczytuje i wyświetla więcej treści podczas przewijania? To właśnie nazywamy nieskończonym zwojem.

Nieskończone przewijanie to popularna technika, która zmniejsza liczbę ładowań strony. Może również zapewnić płynniejszą obsługę, zwłaszcza na urządzeniach mobilnych.

Istnieje kilka różnych sposobów implementacji nieskończonego przewijania w React.js. Jednym ze sposobów jest użycie biblioteki takiej jak react-infinite-scroll-component. Ta biblioteka zapewnia komponent, który wyzwoli zdarzenie, gdy użytkownik przewinie stronę w dół. Następnie możesz użyć tego zdarzenia, aby załadować więcej treści.

Innym sposobem implementacji nieskończonego przewijania jest użycie wbudowanych funkcji, które zapewnia React. Jedną z takich funkcji jest „componentDidMount”, którą React wywołuje, gdy komponent jest montowany po raz pierwszy.

instagram viewer

Możesz użyć tej funkcji, aby załadować pierwszą partię danych, a następnie użyć funkcji „componentDidUpdate”, aby załadować więcej danych, gdy użytkownik przewinie w dół. Możesz również użyj haków React aby dodać nieskończoną funkcję przewijania.

Aby użyć komponentu react-infinite-scroll-component, musisz go najpierw zainstalować za pomocą npm:

np zainstalować reaguj-nieskończoność-zwój-część --ratować

Następnie możesz zaimportować go do swojego komponentu React.

import Reagować z 'reagować'
import Nieskończone przewijania z „komponent przewijania w nieskończoność”
klasaAplikacjarozciąga sięReagować.Część{
konstruktor() {
Super()
Tenstan = {
rzeczy: [],
 ma wiecej: PRAWDA
 }
 }


składnikDidMount() {
Ten.pobierzDane(1)
 }


fetchData = (strona) => {
konst nowe elementy = []


Do (pozwalać ja = 0; ja < 100; i++) {
nowe przedmioty.naciskać(I )
 }


jeśli (strona 100) {
Ten.setState({ ma wiecej: FAŁSZ })
 }


Ten.setState({ rzeczy: [...ten.stan.pozycji, ...nowe pozycje] })
 }


renderowanie() {
powrót (
<dz>
<h1>Nieskończone przewijania</h1>
<Nieskończone przewijania
 długość danych={Ten.state.items.length}
 następny={Ten.pobierzDane}
 maWięcej={Ten.state.hasWięcej}
 program ładujący = {<h4>Ładowanie...</h4>}
 koniecwiadomości={
<p style={{ textAlign: 'Centrum' }}>
<B>Tak! Widziałeś to wszystko</B>
</P>
 }
>
 {Ten.state.items.map((element, indeks) => (
<klucz div={indeks}>
 {przedmiot}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksportdomyślny Aplikacja

Ten kod zaczyna się od zaimportowania Reacta i komponentu InfiniteScroll z biblioteki React-infinite-scroll-component. Następnie tworzy komponent stanowy i inicjuje stan z pustym rzeczy tablica i a ma wiecej flaga ustawiona na true.

W metodzie cyklu życia componentDidMount wywołuje się metodę pobierz dane metoda z A strona parametr 1. Metoda fetchData wykonuje wywołanie API w celu pobrania pewnych danych. Ten przykład po prostu generuje fikcyjne dane. Następnie tworzy tablicę zawierającą 100 elementów.

Jeśli parametr strony ma wartość 100, nie ma więcej elementów, więc ustaw flagę hasMore na wartość false. Spowoduje to zatrzymanie wykonywania przez komponent InfiniteScroll dalszych wywołań interfejsu API. Na koniec ustaw stan przy użyciu nowych danych.

Metoda render wykorzystuje komponent InfiniteScroll i przekazuje niektóre rekwizyty. Właściwość dataLength jest ustawiona na długość tablicy elementów. Następna właściwość jest ustawiona na metodę fetchData. Właściwość hasMore jest ustawiona na flagę hasMore. Właściwość programu ładującego powoduje, że komponent renderuje swoją zawartość jako wskaźnik ładowania. Podobnie wyrenderuje właściwość endMessage jako wiadomość, gdy wszystkie dane zostaną załadowane.

Istnieją również inne rekwizyty, które możesz przekazać do komponentu InfiniteScroll, ale to te, których będziesz używać najczęściej.

Korzystanie z wbudowanych funkcji

React ma również kilka wbudowanych metod, których można użyć do zaimplementowania nieskończonego przewijania.

Pierwsza metoda to składnikDidUpdate. React wywołuje tę metodę po zaktualizowaniu komponentu. Możesz użyć tej metody, aby sprawdzić, czy użytkownik przewinął do dołu strony, a jeśli tak, załadować więcej danych.

Druga metoda to zwój, które React wywołuje, gdy użytkownik przewija. Możesz użyć tej metody, aby śledzić pozycję przewijania. Jeśli użytkownik przewinął do dołu strony, możesz załadować więcej danych.

Oto przykład, jak możesz użyć tych metod do zaimplementowania nieskończonego przewijania:

import Zareaguj, {useState, useEffect} z 'reagować'
funkcjonowaćAplikacja() {
konst [elementy, zestaw elementów] = useState([])
konst [maWięcej, ustawMaWięcej] = użyjStan(PRAWDA)
konst [strona, setPage] = useState(1)


użyjEfektu(() => {
 pobieranie danych (strona)
 }, [strona])


konst fetchData = (strona) => {
konst nowe elementy = []


Do (pozwalać ja = 0; ja < 100; i++) {
nowe przedmioty.naciskać(I)
 }


jeśli (strona 100) {
 zestawMaWięcej(FAŁSZ)
 }


zestaw elementów([...przedmioty, ...noweprzedmioty])
 }


konst onScroll = () => {
konst przewiń do góry = dokument.documentElement.scrollTop
konst przewiń wysokość = dokument.documentElement.scrollHeight
konst wysokość klienta = dokument.documentElement.clientHeight


if (scrollTop + clientHeight >= wysokość przewijania) {
 setPage (strona + 1)
 }
 }


użyjEfektu(() => {
 window.addEventListener('zwój', na przewijaniu)
 powrót () => window.removeEventListener('zwój', na przewijaniu)
 }, [rzeczy])


powrót (
<dz>
 {items.map((element, indeks) => (
<klucz div={indeks}>
 {przedmiot}
</div>
 ))}
</div>
 )
}
eksportdomyślny Aplikacja

Ten kod używa haków useState i useEffect do zarządzania stanem i efektami ubocznymi.

W haku useEffect wywołuje metodę fetchData z bieżącą stroną. Metoda fetchData wykonuje wywołanie API w celu pobrania pewnych danych. W tym przykładzie po prostu generujesz fikcyjne dane, aby zademonstrować technikę.

Pętla for zapełnia tablicę newItems 100 liczbami całkowitymi. Jeśli parametr strony ma wartość 100, ustaw flagę hasMore na wartość false. Spowoduje to zatrzymanie wykonywania przez komponent InfiniteScroll dalszych wywołań interfejsu API. Na koniec ustaw stan z nowymi danymi.

Metoda onScroll śledzi pozycję przewijania. Jeśli użytkownik przewinął do dołu strony, możesz załadować więcej danych.

Hak useEffect dodaje detektor zdarzeń dla zdarzenia przewijania. Kiedy zdarzenie scroll jest uruchamiane, wywołuje metodę onScroll.

Korzystanie z nieskończonego przewijania ma zalety i wady. Może pomóc ulepszyć interfejs użytkownika, zapewniając płynniejsze działanie, zwłaszcza na urządzeniach mobilnych. Jednak może to również prowadzić do utraty treści przez użytkowników, ponieważ mogą oni nie przewinąć strony wystarczająco daleko, aby ją zobaczyć.

Ważne jest, aby rozważyć wszystkie za i przeciw techniki nieskończonego przewijania przed wdrożeniem go na swojej stronie internetowej lub w aplikacji.

Dodanie nieskończonego przewijania do witryny lub aplikacji React.js może poprawić komfort użytkowania. Dzięki nieskończonemu przewijaniu użytkownicy nie muszą klikać, aby zobaczyć więcej treści. Korzystanie z Infinite Scroll w aplikacji React.js może również pomóc zmniejszyć liczbę wczytań stron, co może poprawić wydajność.

Możesz także łatwo i bezpłatnie wdrożyć swoją aplikację React na stronach Github.