Aplikacje internetowe zarządzają dużymi ilościami danych. Na przykład aplikacje handlu elektronicznego wyświetlają miliardy danych w uporządkowany i atrakcyjny wizualnie sposób. Zasadniczo dane muszą być prezentowane w sposób łatwy do zrozumienia i nawigacji dla użytkowników.

Jednak renderowanie wszystkich danych na jednej stronie może prowadzić do problemów z wydajnością, wolniejszego ładowania i złego doświadczenia użytkownika. Z tego powodu wdrożenie logiki stronicowania może znacznie złagodzić te problemy.

W React możesz zdecydować się na wykorzystanie gotowych komponentów dostarczonych przez biblioteki stronicowania, alternatywnie możesz zbudować niestandardowy system stronicowania za pomocą haków React.

Implementacja stronicowania po stronie klienta

Istnieją dwa sposoby implementacji paginacji w aplikacjach: paginacja po stronie klienta i po stronie serwera. Niemniej jednak, niezależnie od wybranego formatu, podstawowa koncepcja pozostaje taka sama. Paginacja po stronie klienta obejmuje obsługę logiki stronicowania po stronie klienta, w przeglądarce użytkownika.

Możesz zaimplementować paginację po stronie klienta przy użyciu różnych technik. Techniki te obejmują:

1. Paginacja oparta na stronach: Ta metoda polega na podzieleniu danych na fragmenty lub strony o stałym rozmiarze, zwykle wyświetlając określoną liczbę elementów na stronie. Użytkownicy mogą poruszać się po stronach za pomocą łączy nawigacyjnych lub przycisków oznaczonych numerami stron lub przyciskami poprzedni i następny. Jest to popularna implementacja w wyszukiwarkach i aplikacjach e-commerce.
2. Nieskończone przewijanie: ta metoda polega na dynamicznym ładowaniu i renderowaniu nowych danych, gdy użytkownik przewija stronę w dół, zapewniając płynne i ciągłe przeglądanie. Ta technika jest szczególnie przydatna w przypadku dużych zbiorów danych, które stale się powiększają, takich jak kanały mediów społecznościowych.

Implementacja paginacji opartej na stronach przy użyciu haków reagowania

Aby rozpocząć, utwórz projekt React. Możesz albo użyć create-react-app Polecenie JavaScript do skonfigurowania podstawowej aplikacji Reactlokalnie lub wykorzystaj Vite do rusztowania projektu React na twojej maszynie.

W tym samouczku wykorzystano Vite, możesz znaleźć kod tego projektu w this Repozytorium GitHub.

Po skonfigurowaniu projektu React przejdźmy do implementacji stronicowania za pomocą haków reagowania.

Konfigurowanie zestawu danych

Idealnie byłoby, gdybyś zazwyczaj pobierał i wyświetlał dane z bazy danych. Jednak w tym samouczku pobierzesz dane z manekina JSONPlaceholder API Zamiast.

w źródło katalogu, utwórz nowy komponenty/paginacja plik i dodaj następujący kod.

1. Utwórz komponent funkcjonalny React i zdefiniuj następujące stany.

   import Zareaguj, {useEffect, useState} z"reagować";
   import"./style.komponent.css";
   funkcjonowaćPaginacja() {
   konst [dane, setData] = useState([]);
   konst [bieżąca strona, ustaw bieżącą stronę] = useState (1);
   konst [itemsPerPage, setitemsPerPage] = useState(5);
   konst [LimitNumerstrony, ustawLimitNumerstrony] = useState(5);
   konst [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   konst [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   powrót (
    <>
   
    Składnik stronicowania</h1> 
   >
   
    </>
    );
   }
   eksportdomyślny Paginacja;

2. Zaimplementuj logikę pobierania danych z fikcyjnego interfejsu API. W środku Paginacja składnik, dodaj poniżej.

    użyjEfekt(() => {
    aportować(" https://jsonplaceholder.typicode.com/todos")
    .Następnie((odpowiedź) => odpowiedź.json())
    .Następnie((json) => ustaw dane (json));
    }, []);
   konst wyświetl dane = (dane) => {
   powrót (
   
   
    {długość danych > 0 &&
    data.map((todo, indeks) => {
   powrót<liklucz={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Powyższy kod służy dwóm głównym celom. Po pierwsze, po zamontowaniu komponentu, UżyjEfekt wyzwalacze przechwytujące, aby pobrać dane z zewnętrznego punktu końcowego interfejsu API, który jest następnie konwertowany do formatu JSON. Wynikowe dane JSON są następnie używane do aktualizacji dane zmienna stanu z pobranymi danymi do wykonania. Po drugie, Wyświetl dane funkcja pobierze pobrane dane jako argument i wyrenderuje dane jako nieuporządkowaną listę zadań do wykonania.
3. W segmencie zwrotnym Paginacja składnik, w tym Wyświetl dane funkcja renderowania pobranych danych w przeglądarce. Oto zaktualizowana wersja kodu:

   powrót (
    <>
    Składnik stronicowania</h1> 
   >
    {displayData (dane)}
    </>
   );
   

   Poprzez dzwonienie wyświetl dane (dane) w elemencie JSX i przekazanie dane zmiennej stanu jako parametru, funkcja wyrenderuje pobrane dane jako nieuporządkowaną listę w przeglądarce.

W tym konkretnym przypadku wyrenderowana lista składa się z dwustu zadań do wykonania. Jednak w rzeczywistych scenariuszach aplikacje będą zarządzać dużymi ilościami danych. Wyświetlanie wszystkich tych danych na jednej stronie internetowej może powodować problemy z wydajnością, takie jak powolne ładowanie i ogólna słaba wydajność aplikacji.

Aby temu zaradzić, należałoby wprowadzić funkcję podziału na strony, aby zapewnić, że każda strona zawiera ograniczoną liczbę elementów, do których użytkownicy mają dostęp oddzielnie za pomocą przycisków nawigacyjnych.

Takie podejście umożliwia użytkownikom poruszanie się po danych w łatwiejszy do zarządzania i zorganizowany sposób, poprawiając ogólną wydajność i wygodę użytkownika aplikacji.

Implementacja logiki podziału na strony w celu wyświetlania ograniczonej liczby elementów na stronie

Aby określić, które elementy do wykonania będą renderowane na każdej stronie, musimy zaimplementować niezbędną logikę. Jednak przed kontynuowaniem konieczne jest określenie całkowitej liczby wymaganych stron na podstawie dostępnych zadań do wykonania.

Aby to osiągnąć, możesz dodać następujący kod do pliku Paginacja część:

konst strony = [];
Do (pozwalać ja = 1; ja <= Matematyka.ceil (długość danych / elementy na stronę); i++) {
 strony.push (i);
 }

Powyższy fragment kodu iteruje przez plik dane tablicę, obliczając całkowitą liczbę potrzebnych stron, dzieląc długość dane tablicy o żądaną liczbę elementów na stronie — początkowa liczba elementów na stronie jest ustawiona na pięć w pliku przedmioty na stronę państwo.

Niemniej jednak możesz zaktualizować ten numer zgodnie z wymaganiami, aby przetestować logikę. Na koniec każdy numer strony jest następnie dodawany do strony szyk. Teraz zaimplementujmy logikę wyświetlania liczby elementów na stronie.

konst indexOfLastItem = bieżąca strona * pozycje na stronę;
konst indexOfFirstItem = indexOfLastItem - elementy na stronę;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Ten kod określa zadania do wykonania na stronie przeglądarki na podstawie bieżąca strona I przedmioty na stronę zmienne — wyodrębnia odpowiednie indeksy dla zestawu zadań do wykonania z tablicy danych za pomocą metody plasterków. Indeksy są następnie używane do pobierania określonych zadań do wykonania, które należą do żądanej strony.

Teraz, aby wyświetlić zadania do wykonania, zaktualizuj plik Wyświetl dane funkcję, przekazując elementy strony jako parametr. Oto zaktualizowana wersja kodu:

powrót (
 <>
 Składnik stronicowania</h1> 
>
 {displayData (elementy strony)}
 </>
);

Dokonując tej aktualizacji, Wyświetl dane funkcja odpowiednio wyrenderuje ograniczoną liczbę elementów do zrobienia, odzwierciedlając bieżącą stronę.

Usprawnienie dostępu do strony i nawigacji za pomocą przycisków nawigacyjnych

Aby zapewnić użytkownikom łatwą nawigację i dostęp do treści na różnych stronach, musisz dodać przyciski poprzedni i następny, a także przyciski określające konkretne numery stron.

Najpierw zaimplementujmy logikę dla przycisków numerów stron. w Paginacja komponent, dodaj poniższy kod.

konst uchwytKliknij = (wydarzenie) => {
 ustaw bieżącą stronę (Numer(zdarzenie.cel.id));
 };
konst renderPageNumbers = strony.map((numer) => {
Jeśli (liczba < maxPageNumberLimit +1 && liczba > minPageNumberLimit) {
powrót (
 klucz={liczba}
 identyfikator={liczba}
 onClick={uchwytKliknij}
 className={bieżąca strona == liczba? "aktywny": zero}
 >
 {numer}
 </li>
 );
 } w przeciwnym razie {
powrótzero;
 }
 });

The uchwytKliknij funkcja wyzwala się, gdy użytkownik kliknie przycisk z numerem strony. Ta akcja następnie aktualizuje plik bieżąca strona zmienną stanu z wybranym numerem strony.

The renderowanie numerów stron zmienna wykorzystuje mapa metoda iteracji po strony array i dynamicznie generuje elementy listy reprezentujące każdy numer strony. Stosuje logikę warunkową, aby określić, które numery stron mają być renderowane na podstawie zdefiniowanych maksymalnych i minimalnych limitów numerów stron.

Na koniec dodaj kod dla następnego i poprzedniego przycisku.

konst handleNextbtn = () => {
 ustaw bieżącą stronę (bieżąca strona + 1);
Jeśli (bieżąca strona + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (bieżąca strona - 1);
Jeśli ((bieżąca strona - 1) % limit liczby stron == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Aby renderować przyciski nawigacyjne, zaktualizuj elementy JSX w następujący sposób:

powrót (
 <>
 Składnik stronicowania</h1> 
>
 {displayData (elementy strony)}
"numery stron">




 onClick={uchwytPoprzedni}
 wyłączone = {bieżąca strona == strony [0]? PRAWDA: FAŁSZ}
 > Poprzedni
 </button>
 </li>

 {renderowanie numerów stron}


 onClick={uchwytNastępny}
 wyłączone = {bieżąca strona == strony [strony. długość - 1]? PRAWDA: FAŁSZ}
 > Dalej
 </button>
 </li>
 </ul>
 </>
 );

Gdy komponent zostanie wyrenderowany, wyświetli numery stron, przyciski poprzedni i następny oraz odpowiednie elementy danych dla bieżącej strony.

Wybór między bibliotekami stronicowania a niestandardowymi systemami stronicowania

Jeśli chodzi o decyzję między użyciem bibliotek stronicowania a budowaniem niestandardowego systemu stronicowania, wybór zależy od różnych czynników. Biblioteki stronicowania, takie jak react-paginate, zapewniają gotowe komponenty i funkcje, umożliwiające szybką i prostą implementację.

Z drugiej strony budowanie niestandardowego systemu stronicowania za pomocą haków React zapewnia większą elastyczność i kontrolę nad logiką stronicowania i interfejsem użytkownika. Ostateczna decyzja będzie zależała od Twoich konkretnych potrzeb i preferencji.