Webové aplikace spravují velké množství dat. Například aplikace elektronického obchodování zobrazují miliardy dat způsobem, který je organizován a vizuálně přitažlivý. Data musí být v zásadě prezentována způsobem, který je pro uživatele snadno srozumitelný a orientovaný.

Vykreslení všech dat na jedné stránce však může vést k problémům s výkonem, pomalejším načítáním a špatným uživatelským dojmem. Z tohoto důvodu může implementace stránkovací logiky tyto problémy výrazně zmírnit.

V Reactu se můžete rozhodnout využít předpřipravené komponenty poskytované knihovnami stránkování, případně si můžete vytvořit vlastní systém stránkování pomocí háčků React.

Implementace stránkování na straně klienta

Existují dva způsoby, jak implementovat stránkování v aplikacích: stránkování na straně klienta a stránkování na straně serveru. Nicméně, bez ohledu na formát, který zvolíte, základní koncept zůstává stejný. Stránkování na straně klienta zahrnuje zpracování logiky stránkování na straně klienta v prohlížeči uživatele.

Stránkování na straně klienta můžete implementovat pomocí různých technik. Tyto techniky zahrnují:

1. Stránkování na základě stránky: Tato metoda zahrnuje rozdělení dat do částí nebo stránek s pevnou velikostí, přičemž se obvykle zobrazuje určitý počet položek na stránku. Uživatelé mohou procházet stránkami pomocí navigačních odkazů nebo tlačítek označených čísly stránek nebo tlačítky předchozí a následující. Toto je oblíbená implementace ve vyhledávačích a aplikacích elektronického obchodování.
2. Nekonečné rolování: Tato metoda zahrnuje dynamické načítání a vykreslování nových dat, když uživatel posouvá stránku dolů, což vytváří bezproblémové a nepřetržité procházení. Tato technika je užitečná zejména při práci s velkými soubory dat, které se neustále rozšiřují, jako jsou zdroje sociálních médií.

Implementace stránkování založeného na stránce pomocí React Hooks

Chcete-li začít, vytvořte projekt React. Můžete buď použít create-react-app příkaz JavaScript pro nastavení základní aplikace Reactlokálně popř využít Vite k vytvoření projektu React na vašem stroji.

Tento tutoriál využil Vite, kód tohoto projektu najdete v tomto úložiště GitHub.

Po nastavení vašeho projektu React pokračujte v implementaci stránkování založeného na stránce pomocí React Hooks.

Konfigurace datové sady

V ideálním případě byste obvykle načítali a zobrazovali data z databáze. V tomto tutoriálu však budete získávat data z figuríny JSONPlaceholder API namísto.

V src adresář, vytvořte nový komponenty/stránkování soubor a přidejte následující kód.

1. Vytvořte funkční komponentu React a definujte následující stavy.

   import Reagovat, { useEffect, useState } z"reagovat";
   import"./style.component.css";
   funkceStránkování() {
   konst [data, setData] = useState([]);
   konst [currentPage, setcurrentPage] = useState(1);
   konst [itemsPerPage, setitemsPerPage] = useState(5);
   konst [pageNumberLimit, setpageNumberLimit] = useState(5);
   konst [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   konst [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   vrátit se (
    <>
   
    Komponenta stránkování</h1> 
   >
   
    </>
    );
   }
   vývoznívýchozí Stránkování;

2. Implementujte logiku pro načítání dat z fiktivního rozhraní API. Uvnitř Stránkování komponentu, přidejte níže uvedené.

    useEffect(() => {
    vynést(" https://jsonplaceholder.typicode.com/todos")
    .pak((Odezva) => response.json())
    .pak((json) => setData (json));
    }, []);
   konst displayData = (data) => {
   vrátit se (
   
   
    {data.length > 0 &&
    data.map((úkol, index) => {
   vrátit se<liklíč={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Výše uvedený kód slouží dvěma hlavním účelům. Za prvé, jakmile se komponenta namontuje, useEffect hákové spouštěče pro načtení dat z externího koncového bodu API, které se poté převedou do formátu JSON. Výsledná data JSON se pak použijí k aktualizaci data stavová proměnná s načtenými daty úkolů. Za druhé, displayData funkce vezme načtená data jako argument a vykreslí data jako neuspořádaný seznam úkolů.
3. Ve zpětném segmentu Stránkování komponentu, zahrnují displayData funkce k vykreslení načtených dat v prohlížeči. Zde je aktualizovaná verze kódu:

   vrátit se (
    <>
    Komponenta stránkování</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Zavoláním displayData (data) v rámci prvku JSX a předání data stavová proměnná jako parametr, funkce pak vykreslí načtená data jako neuspořádaný seznam v prohlížeči.

V tomto konkrétním případě se vykreslený seznam skládá ze dvou set úkolů. Ve scénářích reálného světa však budou aplikace spravovat velké množství dat. Zobrazení všech těchto dat na jediné webové stránce může vést k problémům s výkonem, jako je pomalé načítání a celkově špatný výkon aplikace.

K vyřešení tohoto problému by bylo vhodné začlenit funkci stránkování, aby každá stránka obsahovala omezený počet položek, ke kterým mohou uživatelé přistupovat samostatně pomocí navigačních tlačítek.

Tento přístup umožňuje uživatelům procházet daty lépe ovladatelným a organizovaným způsobem, což zlepšuje celkový výkon a uživatelský dojem z aplikace.

Implementace logiky stránkování pro zobrazení omezeného počtu položek na stránku

Abychom určili, které položky úkolů se vykreslí na každé stránce, musíme implementovat nezbytnou logiku. Než však budete pokračovat, je nezbytné určit celkový počet požadovaných stránek na základě dostupných položek úkolů.

Chcete-li toho dosáhnout, můžete do souboru přidat následující kód Stránkování komponent:

konst stránky = [];
pro (nechat i = 1; i <= Matematika.ceil (data.length / itemsPerPage); i++) {
 stránky.push (i);
 }

Fragment kódu výše se iteruje přes data pole, které vypočítá celkový počet potřebných stránek vydělením délky pole data pole požadovaným počtem položek na stránku – počáteční počet položek na stránku je nastaven na pět v Položek na stránce Stát.

Toto číslo však můžete podle potřeby aktualizovat, abyste otestovali logiku. Nakonec je každé číslo stránky přidáno do stránky pole. Nyní implementujme logiku pro zobrazení počtu položek na stránce.

konst indexOfLastItem = aktuální stránka * itemsPerPage;
konst indexOfFirstItem = indexOfLastItem - itemsPerPage;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Tento kód určuje úkoly, které se mají vykreslit na stránce prohlížeče aktuální stránka a Položek na stránce proměnné – extrahuje odpovídající indexy pro sadu úkolů z pole dat pomocí metody slice. Indexy se pak použijí k načtení konkrétních úkolů, které patří k požadované stránce.

Chcete-li nyní zobrazit úkoly, aktualizujte soubor displayData funkce předáním pageItems jako parametr. Zde je aktualizovaná verze kódu:

vrátit se (
 <>
 Komponenta stránkování</h1> 
>
 {displayData (pageItems)}
 </>
);

Provedením této aktualizace se displayData funkce vykreslí omezený počet úkolů odpovídajícím způsobem, který odráží aktuální stránku.

Zjednodušení přístupu ke stránce a navigace pomocí navigačních tlačítek

Chcete-li uživatelům zajistit snadnou navigaci a přístup k obsahu na různých stránkách, musíte přidat tlačítka předchozí a další a také tlačítka, která určují konkrétní čísla stránek.

Nejprve implementujme logiku pro tlačítka čísel stránek. V Stránkování komponentu, přidejte kód níže.

konst handleClick = (událost) => {
 setcurrentPage(Číslo(event.target.id));
 };
konst renderPageNumbers = pages.map((číslo) => {
-li (číslo < maxPageNumberLimit +1 && number > minPageNumberLimit) {
vrátit se (
 klíč={číslo}
 id={číslo}
 onClick={handleClick}
 className={currentPage == číslo? "aktivní": nula}
 >
 {číslo}
 </li>
 );
 } jiný {
vrátit senula;
 }
 });

The kliknout na kliku funkce se spustí, když uživatel klikne na tlačítko s číslem stránky. Tato akce pak aktualizuje aktuální stránka stavová proměnná s vybraným číslem stránky.

The renderPageNumbers proměnná využívá mapa metoda iterace přes stránky pole a dynamicky generuje položky seznamu představující každé číslo stránky. Aplikuje podmíněnou logiku k určení, která čísla stránek se mají vykreslit na základě definovaných limitů maximálního a minimálního počtu stránek.

Nakonec přidejte kód pro další a předchozí tlačítka.

konst handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
-li (aktuální stránka + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
-li ((aktuální stránka - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Chcete-li vykreslit navigační tlačítka, aktualizujte prvky JSX takto:

vrátit se (
 <>
 Komponenta stránkování</h1> 
>
 {displayData (pageItems)}
"pageNumbers">




 onClick={handlePrevbtn}
 vypnuto={currentPage == stránky[0]? skutečný: Nepravdivé}
 > Předchozí
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == pages[pages.length - 1]? skutečný: Nepravdivé}
 > Další
 </button>
 </li>
 </ul>
 </>
 );

Jakmile se komponenta vykreslí, zobrazí čísla stránek, předchozí a následující tlačítka a odpovídající datové položky pro aktuální stránku.

Výběr mezi stránkovacími knihovnami a vlastními systémy stránkování

Pokud jde o rozhodování mezi použitím stránkovacích knihoven nebo vytvořením vlastního systému stránkování, závisí výběr na různých faktorech. Knihovny stránkování, jako je reagovat-paginate, poskytují předpřipravené komponenty a funkce, což umožňuje rychlou a přímou implementaci.

Na druhou stranu vytvoření vlastního systému stránkování pomocí háčků React nabízí větší flexibilitu a kontrolu nad logikou stránkování a uživatelským rozhraním. Rozhodnutí bude nakonec záviset na vašich konkrétních potřebách a preferencích.