Aplicațiile web gestionează cantități mari de date. De exemplu, aplicațiile de comerț electronic afișează miliarde de date într-un mod care este atât organizat, cât și atrăgător din punct de vedere vizual. În esență, datele trebuie să fie prezentate într-un mod ușor de înțeles și de navigat de către utilizatori.

Cu toate acestea, redarea tuturor datelor pe o singură pagină poate duce la probleme de performanță, timpi de încărcare mai lenți și experiențe slabe pentru utilizator. Din acest motiv, implementarea logicii de paginare poate atenua semnificativ aceste probleme.

În React, puteți opta pentru a utiliza componente pre-construite furnizate de bibliotecile de paginare, alternativ, puteți construi un sistem de paginare personalizat folosind cârlige React.

Implementarea paginarii la nivelul clientului

Există două moduri de a implementa paginarea în aplicații: paginarea pe partea client și pe partea serverului. Cu toate acestea, indiferent de formatul pe care îl alegeți, conceptul de bază rămâne același. Paginarea pe partea client implică gestionarea logicii de paginare pe partea client, în browserul utilizatorului.

Puteți implementa paginarea pe partea clientului folosind diverse tehnici. Aceste tehnici includ:

1. Paginare bazată pe pagină: Această metodă implică împărțirea datelor în bucăți sau pagini de dimensiuni fixe, afișând de obicei un anumit număr de articole pe pagină. Utilizatorii pot naviga prin pagini folosind link-uri sau butoane de navigare, etichetate cu numere de pagină sau butoane precedente și următoare. Aceasta este o implementare populară cu motoarele de căutare și aplicațiile de comerț electronic.
2. Defilare infinită: Această metodă implică încărcarea și redarea dinamică a datelor noi pe măsură ce utilizatorul derulează în jos pe pagină, creând o experiență de navigare continuă și fără întreruperi. Această tehnică este deosebit de utilă atunci când aveți de-a face cu seturi de date mari care se extind continuu, cum ar fi fluxurile de rețele sociale.

Implementarea paginației bazate pe pagină folosind React Hooks

Pentru a începe, creați un proiect React. Puteți folosi fie Comanda JavaScript create-react-app pentru a configura o aplicație React de bazălocal sau utilizați Vite pentru a construi un proiect React pe mașina dvs.

Acest tutorial a folosit Vite, puteți găsi codul acestui proiect în acesta Depozitul GitHub.

După ce v-ați configurat proiectul React, să continuăm cu implementarea paginației bazate pe pagini folosind React Hooks.

Configurarea setului de date

În mod ideal, ați prelua și afișa date dintr-o bază de date. Cu toate acestea, pentru acest tutorial, veți prelua date de la un manechin API-ul JSONPlaceholder in schimb.

În src director, creați un nou componente/paginare fișier și adăugați următorul cod.

1. Creați o componentă funcțională React și definiți următoarele stări.

   import Reacționează, { useEffect, useState } din"reacţiona";
   import„./style.component.css”;
   funcţiePaginare() {
   const [date, setData] = useState([]);
   const [currentPage, setcurrentPage] = useState(1);
   const [itemsPerPage, setitemsPerPage] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   întoarcere (
    <>
   
    Componenta de paginare</h1> 
   >
   
    </>
    );
   }
   exportMod implicit Paginare;

2. Implementați logica pentru a prelua date din API-ul inactiv. În interiorul Paginare componentă, adăugați mai jos.

    useEffect(() => {
    aduce(" https://jsonplaceholder.typicode.com/todos")
    .apoi((raspuns) => response.json())
    .apoi((json) => setData (json));
    }, []);
   const displayData = (date) => {
   întoarcere (
   
   
    {data.length > 0 &&
    data.map((tot, index) => {
   întoarcere<licheie={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Codul de mai sus servește două scopuri principale. În primul rând, odată ce componenta se montează, useEffect hook declanșează pentru a prelua date de la punctul final API extern, care este apoi convertit în format JSON. Datele JSON rezultate sunt apoi folosite pentru a actualiza date variabilă de stare cu datele de făcut preluate. În al doilea rând, displayData Funcția va lua datele preluate ca argument și va reda datele ca o listă neordonată de sarcini de făcut.
3. În segmentul de întoarcere al Paginare componentă, includ displayData funcția de redare a datelor preluate în browser. Iată o versiune actualizată a codului:

   întoarcere (
    <>
    Componenta de paginare</h1> 
   >
    {displayData (date)}
    </>
   );
   

   Sunând displayData (date) în cadrul elementului JSX și trecând date variabilă de stare ca parametru, funcția va reda apoi datele preluate ca o listă neordonată în browser.

În acest caz particular, lista redată constă din două sute de sarcini de făcut. Cu toate acestea, în scenariile din lumea reală, aplicațiile vor gestiona cantități mari de date. Afișarea tuturor acestor date pe o singură pagină web poate duce la probleme de performanță, cum ar fi timpii de încărcare lenți și performanța generală slabă a aplicației.

Pentru a rezolva acest lucru, ar fi potrivit să se încorporeze funcționalitatea de paginare pentru a se asigura că fiecare pagină conține un număr limitat de articole pe care utilizatorii le pot accesa separat utilizând butoanele de navigare.

Această abordare permite utilizatorilor să navigheze prin date într-un mod mai gestionabil și organizat, îmbunătățind performanța generală și experiența utilizatorului aplicației.

Implementarea logicii de paginare pentru afișarea unui număr limitat de articole pe pagină

Pentru a determina ce elemente de făcut vor fi afișate pe fiecare pagină, trebuie să implementăm logica necesară. Cu toate acestea, înainte de a continua, este esențial să determinați numărul total de pagini necesare pe baza elementelor de făcut disponibile.

Pentru a realiza acest lucru, puteți adăuga următorul cod la Paginare componenta:

const pagini = [];
pentru (lăsa i = 1; eu <= Matematică.tavan (data.length / itemiPerPage); i++) {
 pagini.push (i);
 }

Fragmentul de cod de mai sus, iterează prin date matrice, calculând numărul total de pagini necesare prin împărțirea lungimii date matrice după numărul dorit de articole pe pagină—numărul inițial de articole pe pagină este setat la cinci în articole pe pagină stat.

Cu toate acestea, puteți actualiza acest număr după cum este necesar pentru a testa logica. În cele din urmă, fiecare număr de pagină este apoi adăugat la pagini matrice. Acum, să implementăm logica pentru afișarea unui număr de articole pe pagină.

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Acest cod determină sarcinile de făcut pe care trebuie să le redați pe pagina browserului pagina curenta și articole pe pagină variabile — extrage indecșii corespunzători pentru setul de sarcini de făcut din matricea de date folosind metoda slice. Indecșii sunt apoi utilizați pentru a prelua sarcinile specifice care aparțin paginii dorite.

Acum, pentru a afișa sarcinile de făcut, actualizați displayData funcţionează prin trecerea pageItems ca parametru. Iată o versiune actualizată a codului:

întoarcere (
 <>
 Componenta de paginare</h1> 
>
 {displayData (pageItems)}
 </>
);

Făcând această actualizare, displayData funcția va reda un număr limitat de elemente de făcut în mod corespunzător, reflectând pagina curentă.

Simplificarea accesului la pagină și a navigării cu butoane de navigare

Pentru a vă asigura că utilizatorii navighează și accesează cu ușurință conținutul de pe diferite pagini, trebuie să adăugați butoane precedente și următoare, precum și butoane care specifică numerele specifice de pagină.

Mai întâi, să implementăm logica butoanelor cu numărul paginii. În Paginare componentă, adăugați codul de mai jos.

const handleClick = (eveniment) => {
 setcurrentPage(Număr(event.target.id));
 };
const renderPageNumbers = pages.map((număr) => {
dacă (număr < maxPageNumberLimit +1 && număr > minPageNumberLimit) {
întoarcere (
 cheie={număr}
 id={număr}
 onClick={handleClick}
 className={currentPage == număr? "activ": nul}
 >
 {număr}
 </li>
 );
 } altfel {
întoarcerenul;
 }
 });

The handleClick funcția se declanșează atunci când un utilizator face clic pe un buton cu numărul de pagină. Această acțiune actualizează apoi pagina curenta variabila de stare cu numărul paginii selectate.

The renderPageNumbers variabila utilizează Hartă metoda de a repeta peste pagini matrice și generează în mod dinamic elemente de listă reprezentând fiecare număr de pagină. Se aplică logica condiționată pentru a determina ce numere de pagină să fie redate pe baza limitelor maxime și minime definite ale numerelor de pagini.

În cele din urmă, adăugați codul pentru butoanele următor și precedent.

const handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
dacă (Pagina curentă + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
dacă ((pagina curenta - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Pentru a reda butoanele de navigare, actualizați elementele JSX după cum urmează:

întoarcere (
 <>
 Componenta de paginare</h1> 
>
 {displayData (pageItems)}
"pageNumbers">




 onClick={handlePrevbtn}
 disabled={currentPage == pagini[0]? Adevărat: fals}
 > Anterior
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == pagini[pages.length - 1]? Adevărat: fals}
 > În continuare
 </button>
 </li>
 </ul>
 </>
 );

Odată ce componenta este randată, va afișa numerele paginii, butoanele precedente și următoare și elementele de date corespunzătoare pentru pagina curentă.

Alegerea dintre bibliotecile de paginare și sistemele de paginare personalizate

Când vine vorba de a decide între utilizarea bibliotecilor de paginare sau construirea unui sistem de paginare personalizat, alegerea depinde de diverși factori. Bibliotecile de paginare, cum ar fi react-paginate, oferă componente și funcționalități prefabricate, permițând o implementare rapidă și simplă.

Pe de altă parte, construirea unui sistem de paginare personalizat folosind cârlige React oferă mai multă flexibilitate și control asupra logicii de paginare și a interfeței cu utilizatorul. Decizia va depinde în cele din urmă de nevoile și preferințele dumneavoastră specifice.