Webové aplikácie spravujú veľké množstvo dát. Napríklad aplikácie elektronického obchodu zobrazujú miliardy údajov spôsobom, ktorý je organizovaný a vizuálne príťažlivý. Údaje musia byť v podstate prezentované spôsobom, ktorý je pre používateľov jednoduchý na pochopenie a orientáciu.

Vykreslenie všetkých údajov na jednej stránke však môže viesť k problémom s výkonom, pomalším časom načítania a zlým dojmom používateľov. Z tohto dôvodu môže implementácia logiky stránkovania výrazne zmierniť tieto problémy.

V Reacte sa môžete rozhodnúť využívať vopred vytvorené komponenty poskytované knižnicami stránkovania, prípadne si môžete vytvoriť vlastný systém stránkovania pomocou hákov React.

Implementácia stránkovania na strane klienta

Existujú dva spôsoby implementácie stránkovania v aplikáciách: stránkovanie na strane klienta a stránkovanie na strane servera. Napriek tomu, bez ohľadu na formát, ktorý si vyberiete, základný koncept zostáva rovnaký. Stránkovanie na strane klienta zahŕňa spracovanie logiky stránkovania na strane klienta v prehliadači používateľa.

Stránkovanie na strane klienta môžete implementovať pomocou rôznych techník. Tieto techniky zahŕňajú:

1. Stránkovanie na základe stránky: Táto metóda zahŕňa rozdelenie údajov do častí alebo stránok s pevnou veľkosťou, pričom sa zvyčajne zobrazuje určitý počet položiek na stránku. Používatelia môžu prechádzať stránkami pomocou navigačných odkazov alebo tlačidiel, ktoré sú označené číslami strán alebo predchádzajúcimi a nasledujúcimi tlačidlami. Ide o obľúbenú implementáciu vo vyhľadávačoch a aplikáciách elektronického obchodu.
2. Nekonečné rolovanie: Táto metóda zahŕňa dynamické načítavanie a vykresľovanie nových údajov, keď sa používateľ posúva po stránke nadol, čím sa vytvára plynulé a nepretržité prehliadanie. Táto technika je užitočná najmä pri práci s veľkými súbormi údajov, ktoré sa neustále rozširujú, ako sú napríklad informačné kanály sociálnych médií.

Implementácia stránkovania na základe stránky pomocou React Hooks

Ak chcete začať, vytvorte projekt React. Môžete použiť buď Create-react-app JavaScript príkaz na nastavenie základnej aplikácie Reactlokálne resp využiť Vite na lešenie projektu React na vašom stroji.

Tento tutoriál využil Vite, v ňom nájdete kód tohto projektu úložisko GitHub.

Po nastavení vášho projektu React pokračujte v implementácii stránkovania na základe stránky pomocou React Hooks.

Konfigurácia množiny údajov

V ideálnom prípade by ste zvyčajne získavali a zobrazovali údaje z databázy. Pre tento tutoriál však budete získavať údaje z figuríny JSONPlaceholder API namiesto toho.

V src adresár, vytvorte nový komponenty/stránkovanie súbor a pridajte nasledujúci kód.

1. Vytvorte funkčný komponent React a definujte nasledujúce stavy.

   importovať Reagovať, { useEffect, useState } od"reagovať";
   importovať"./style.component.css";
   funkciuStránkovanie() {
   konšt [data, setData] = useState([]);
   konšt [currentPage, setcurrentPage] = useState(1);
   konšt [itemsPerPage, setitemsPerPage] = useState(5);
   konšt [pageNumberLimit, setpageNumberLimit] = useState(5);
   konšt [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   konšt [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   vrátiť (
    <>
   
    Komponent stránkovania</h1> 
   >
   
    </>
    );
   }
   exportpredvolená stránkovanie;

2. Implementujte logiku na načítanie údajov z fiktívneho rozhrania API. Vnútri Stránkovanie komponentu, pridajte nižšie uvedené.

    useEffect(() => {
    priniesť (" https://jsonplaceholder.typicode.com/todos")
    .potom((odpoveď) => response.json())
    .potom((json) => setData (json));
    }, []);
   konšt displayData = (údajov) => {
   vrátiť (
   
   
    {data.length > 0 &&
    data.map((todo, index) => {
   vrátiť<likľúč={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Vyššie uvedený kód slúži na dva hlavné účely. Po prvé, akonáhle je komponent namontovaný, useEffect hákové spúšťače na načítanie údajov z externého koncového bodu API, ktoré sa potom skonvertujú do formátu JSON. Výsledné údaje JSON sa potom použijú na aktualizáciu údajov stavová premenná s načítanými údajmi o úlohách. Po druhé, displayData funkcia vezme načítané údaje ako argument a vykreslí údaje ako neusporiadaný zoznam úloh.
3. V návratovom segmente Stránkovanie komponent, zahŕňajú displayData funkcia na vykreslenie načítaných údajov v prehliadači. Tu je aktualizovaná verzia kódu:

   vrátiť (
    <>
    Komponent stránkovania</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Zavolaním displayData (údaje) v rámci prvku JSX a odovzdaním údajov stavová premenná ako parameter, funkcia potom vykreslí načítané dáta ako neusporiadaný zoznam v prehliadači.

V tomto konkrétnom prípade sa vykreslený zoznam skladá z dvesto úloh. V reálnych scenároch však budú aplikácie spravovať veľké množstvo údajov. Zobrazenie všetkých týchto údajov na jednej webovej stránke môže viesť k problémom s výkonom, ako je pomalé načítanie a celkovo slabý výkon aplikácie.

Na vyriešenie tohto problému by bolo vhodné začleniť funkciu stránkovania, aby sa zabezpečilo, že každá stránka bude obsahovať obmedzený počet položiek, ku ktorým môžu používatelia pristupovať samostatne pomocou navigačných tlačidiel.

Tento prístup umožňuje používateľom prechádzať údajmi lepšie spravovateľným a organizovaným spôsobom, čím sa zlepšuje celkový výkon a používateľská skúsenosť s aplikáciou.

Implementácia logiky stránkovania na zobrazenie obmedzeného počtu položiek na stránku

Aby sme určili, ktoré položky úloh sa vykreslia na každej stránke, musíme implementovať potrebnú logiku. Pred pokračovaním je však nevyhnutné určiť celkový počet požadovaných strán na základe dostupných položiek úloh.

Aby ste to dosiahli, môžete do súboru pridať nasledujúci kód Stránkovanie komponent:

konšt strany = [];
pre (nech i = 1; ja <= Matematika.ceil (data.length / itemsPerPage); i++) {
 strany.push (i);
 }

Útržok kódu uvedený vyššie iteruje cez údajov pole, pričom sa vypočíta celkový počet potrebných strán vydelením dĺžky súboru údajov poľa požadovaným počtom položiek na stranu – počiatočný počet položiek na stranu je nastavený na päť v poli položky na stránku štát.

Toto číslo však môžete podľa potreby aktualizovať, aby ste otestovali logiku. Nakoniec sa každé číslo strany pridá do stránky pole. Teraz implementujme logiku pre zobrazenie počtu položiek na stránku.

konšt indexOfLastItem = aktuálna stránka * položky na stránke;
konšt indexOfFirstItem = indexOfLastItem - itemsPerPage;
konšt pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Tento kód určuje úlohy, ktoré sa majú vykresliť na stránke prehliadača aktuálna stránka a položky na stránku premenné – extrahuje zodpovedajúce indexy pre množinu úloh z dátového poľa pomocou metódy rezu. Indexy sa potom použijú na získanie konkrétnych úloh, ktoré patria k požadovanej stránke.

Teraz, ak chcete zobraziť úlohy, aktualizujte súbor displayData funkciu prejdením pageItems ako parameter. Tu je aktualizovaná verzia kódu:

vrátiť (
 <>
 Komponent stránkovania</h1> 
>
 {displayData (pageItems)}{101}
 </>
);

Vykonaním tejto aktualizácie sa displayData funkcia vykreslí obmedzený počet úloh vhodne podľa aktuálnej stránky.

Zjednodušenie prístupu k stránke a navigácie pomocou navigačných tlačidiel

Ak chcete používateľom zabezpečiť jednoduchú navigáciu a prístup k obsahu na rôznych stránkach, musíte pridať predchádzajúce a nasledujúce tlačidlá, ako aj tlačidlá, ktoré určujú konkrétne čísla strán.

Najprv implementujme logiku pre tlačidlá s číslami stránok. V Stránkovanie komponentu, pridajte kód nižšie.

konšt handleClick = (udalosť) => {
 setcurrentPage(číslo(event.target.id));
 };
konšt renderPageNumbers = pages.map((číslo) => {
ak (číslo < maxPageNumberLimit +1 && number > minPageNumberLimit) {
vrátiť (
 key={number}
 id={číslo}
 onClick={handleClick}
 className={currentPage == číslo? "aktívny": nulový}
 >
 {číslo}
 </li>
 );
 } inak {
vrátiťnulový;
 }
 });

The handleClick funkcia sa spustí, keď používateľ klikne na tlačidlo s číslom strany. Táto akcia potom aktualizuje súbor aktuálna stránka stavová premenná so zvoleným číslom strany.

The renderPageNumbers premenná využíva mapa metóda iterácie cez stránky pole a dynamicky generuje položky zoznamu predstavujúce každé číslo strany. Aplikuje podmienenú logiku na určenie, ktoré čísla strán sa majú vykresliť na základe definovaných limitov maximálneho a minimálneho počtu strán.

Nakoniec pridajte kód pre ďalšie a predchádzajúce tlačidlá.

konšt handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
ak (aktuálna strana + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konšt handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
ak ((aktuálna stránka - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Ak chcete vykresliť navigačné tlačidlá, aktualizujte prvky JSX takto:

vrátiť (
 <>
 Komponent stránkovania</h1> 
>
 {displayData (pageItems)}{101}
"pageNumbers">




 onClick={handlePrevbtn}
 zakázané={súčasná stránka == stránky[0]? pravda: falošný}
 > Predchádzajúce
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 vypnuté={currentPage == pages[pages.length - 1]? pravda: falošný}
 > Ďalej
 </button>
 </li>
 </ul>
 </>
 );

Po vykreslení komponentu sa zobrazia čísla strán, predchádzajúce a nasledujúce tlačidlá a príslušné dátové položky pre aktuálnu stránku.

Výber medzi knižnicami stránkovania a vlastnými systémami stránkovania

Pokiaľ ide o rozhodovanie medzi použitím stránkovacích knižníc alebo vytvorením vlastného systému stránkovania, výber závisí od rôznych faktorov. Knižnice stránkovania, ako napríklad Reag-Paginate, poskytujú vopred vytvorené komponenty a funkcie, čo umožňuje rýchlu a jednoduchú implementáciu.

Na druhej strane vytvorenie vlastného systému stránkovania pomocou hákov React ponúka väčšiu flexibilitu a kontrolu nad logikou stránkovania a používateľským rozhraním. Rozhodnutie bude v konečnom dôsledku závisieť od vašich konkrétnych potrieb a preferencií.