A webes alkalmazások nagy mennyiségű adatot kezelnek. Például az e-kereskedelmi alkalmazások több milliárd adatot jelenítenek meg szervezett és látványos módon. Lényegében az adatokat úgy kell bemutatni, hogy a felhasználók könnyen megértsék és eligazodjanak.

Az összes adat egyetlen oldalon való megjelenítése azonban teljesítményproblémákat, lassabb betöltési időt és rossz felhasználói élményt okozhat. Emiatt a lapozási logika megvalósítása jelentősen enyhítheti ezeket a problémákat.

A Reactban választhatja a lapozási könyvtárak által biztosított előre elkészített komponensek használatát, vagy létrehozhat egy egyéni lapozási rendszert a React hook segítségével.

Ügyféloldali lapozás megvalósítása

Az alkalmazásokban kétféleképpen lehet oldalszámozást megvalósítani: ügyféloldali és szerveroldali lapozást. Mindazonáltal, függetlenül a választott formátumtól, a mögöttes koncepció ugyanaz marad. A kliens oldali lapozás magában foglalja a lapozási logika kezelését a kliens oldalon, a felhasználó böngészőjében.

Különféle technikákkal megvalósíthatja az ügyféloldali lapozást. Ezek a technikák a következők:

1. Oldal alapú lapozás: Ez a módszer magában foglalja az adatok rögzített méretű darabokra vagy oldalakra való felosztását, jellemzően bizonyos számú elem megjelenítésével oldalanként. A felhasználók navigációs hivatkozások vagy gombok segítségével navigálhatnak az oldalakon, amelyek oldalszámmal vagy az előző és a következő gombokkal vannak ellátva. Ez egy népszerű megvalósítás a keresőmotorok és az e-kereskedelmi alkalmazások körében.
2. Végtelen görgetés: Ez a módszer magában foglalja az új adatok dinamikus betöltését és megjelenítését, miközben a felhasználó lefelé görget az oldalon, zökkenőmentes és folyamatos böngészési élményt biztosítva. Ez a technika különösen akkor hasznos, ha nagy, folyamatosan bővülő adatkészletekkel, például közösségi média hírfolyamokkal foglalkozik.

Oldal alapú lapozás megvalósítása React Hook segítségével

A kezdéshez hozzon létre egy React projektet. Használhatja a create-react-app JavaScript parancs egy alapvető React alkalmazás beállításáhozhelyben ill használja a Vite-t egy React projekt felállványozásához a gépeden.

Ez az oktatóanyag a Vite-ot használta, ebben a projekt kódja található GitHub adattár.

A React projekt beállítása után folytassuk az oldalalapú lapozás megvalósítását React Hooks segítségével.

Az adatkészlet konfigurálása

Ideális esetben általában egy adatbázisból kéri le és jeleníti meg az adatokat. Ehhez az oktatóanyaghoz azonban egy próbabábuból fog lekérni adatokat JSONPlaceholder API helyette.

Ban,-ben src könyvtárat, hozzon létre egy újat összetevők/oldalszámozás fájlt, és adja hozzá a következő kódot.

1. Hozzon létre egy React funkcionális komponenst, és határozza meg a következő állapotokat.

   import React, { useEffect, useState } tól től"reagál";
   import"./style.component.css";
   funkcióLapszámozás() {
   const [data, 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);
   Visszatérés (
    <>
   
    Lapozási komponens</h1> 
   >
   
    </>
    );
   }
   exportalapértelmezett Lapszámozás;

2. Valósítsa meg a logikát az adatok lekéréséhez a hamis API-ból. Benne Lapszámozás összetevőt, adja hozzá az alábbiakat.

    useEffect(() => {
    fetch(" https://jsonplaceholder.typicode.com/todos")
    .akkor((válasz) => válasz.json())
    .akkor((json) => setData (json));
    }, []);
   const displayData = (adat) => {
   Visszatérés (
   
   
    {data.length > 0 &&
    data.map((tennivaló, index) => {
   Visszatérés<likulcs={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   A fenti kód két fő célt szolgál. Először is, miután az alkatrész fel van szerelve, a useEffect hook aktiválja az adatok lekérését a külső API-végpontról, amelyet ezután a rendszer JSON formátumba konvertál. A kapott JSON-adatokat ezután a rendszer a frissítéshez használja adat állapotváltozó a lekért teendők adataival. Másodszor, a displayData függvény a lekért adatokat argumentumként veszi, és az adatokat a teendők rendezetlen listájaként jeleníti meg.
3. A visszatérő szegmensben a Lapszámozás komponens, tartalmazza a displayData funkcióval jeleníti meg a letöltött adatokat a böngészőben. Íme a kód frissített verziója:

   Visszatérés (
    <>
    Lapozási komponens</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Hívással displayData (adat) a JSX elemen belül és átadva a adat állapotváltozót paraméterként, a függvény ezután rendezetlen listaként jeleníti meg a letöltött adatokat a böngészőben.

Ebben az esetben a megjelenített lista kétszáz feladatból áll. A valós helyzetekben azonban az alkalmazások nagy mennyiségű adatot kezelnek. Ezen adatok egyetlen weboldalon való megjelenítése teljesítményproblémákat okozhat, például lassú betöltési időket és általános gyenge alkalmazásteljesítményt.

Ennek megoldására célszerű lenne beépíteni az oldalszámozási funkciót, hogy minden oldal korlátozott számú elemet tartalmazzon, amelyeket a felhasználók a navigációs gombok segítségével külön-külön is elérhetnek.

Ez a megközelítés lehetővé teszi a felhasználók számára, hogy kezelhetőbb és szervezettebb módon navigáljanak az adatok között, javítva az alkalmazás általános teljesítményét és felhasználói élményét.

Lapozási logika megvalósítása oldalanként korlátozott számú elem megjelenítéséhez

Annak meghatározásához, hogy mely teendők jelenjenek meg az egyes oldalakon, meg kell valósítanunk a szükséges logikát. A folytatás előtt azonban elengedhetetlen, hogy a rendelkezésre álló teendők alapján meghatározzuk a szükséges oldalak teljes számát.

Ennek eléréséhez hozzáadhatja a következő kódot a Lapszámozás összetevő:

const oldalak = [];
számára (hagyja i = 1; én <= Math.ceil (data.length / itemsPerPage); i++) {
 oldalak.push (i);
 }

A fenti kódrészlet ismétlődik a adat tömb, a szükséges oldalak teljes számának kiszámítása a hosszának elosztásával adat tömb az oldalankénti kívánt elemszám szerint – az oldalankénti elemek kezdeti száma ötre van állítva a oldalankénti tételek állapot.

Ennek ellenére szükség szerint frissítheti ezt a számot a logika teszteléséhez. Végül minden oldalszám hozzáadásra kerül a oldalakat sor. Most pedig hajtsuk végre az oldalanként több elem megjelenítésének logikáját.

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

Ez a kód határozza meg a böngészőoldalon megjelenítendő teendőket aktuális oldal és oldalankénti tételek változók – a szelet módszerrel kivonja a teendők halmazának megfelelő indexeit az adattömbből. Az indexek ezután a kívánt oldalhoz tartozó konkrét teendők lekérésére szolgálnak.

Most a teendők megjelenítéséhez frissítse a displayData függvény átadásával oldalElemek paraméterként. Íme a kód frissített verziója:

Visszatérés (
 <>
 Lapozási komponens</h1> 
>
 {displayData (pageItems)}
 </>
);

Ezzel a frissítéssel a displayData funkció korlátozott számú teendőt megfelelően jelenít meg, tükrözve az aktuális oldalt.

Az oldalelérés és a navigáció egyszerűsítése navigációs gombokkal

Annak érdekében, hogy a felhasználók könnyen navigálhassanak és hozzáférjenek a különböző oldalakon található tartalmakhoz, hozzá kell adni az előző és a következő gombokat, valamint az adott oldalszámokat meghatározó gombokat.

Először is valósítsuk meg az oldalszám gombok logikáját. Ban,-ben Lapszámozás összetevőt, adja hozzá az alábbi kódot.

const handleClick = (esemény) => {
 setcurrentPage(Szám(event.target.id));
 };
const renderPageNumbers = pages.map((szám) => {
ha (szám < maxPageNumberLimit +1 && szám > minPageNumberLimit) {
Visszatérés (
 kulcs={szám}
 id={szám}
 onClick={handleClick}
 className={currentPage == szám? "aktív": nulla}
 >
 {szám}
 </li>
 );
 } más {
Visszatérésnulla;
 }
 });

A fogantyúKattintson funkció akkor aktiválódik, amikor a felhasználó rákattint egy oldalszám gombra. Ez a művelet frissíti a aktuális oldal állapotváltozó a kiválasztott oldalszámmal.

A renderPageNumbers változó a térkép módszer az iteráció során oldalakat tömböt, és dinamikusan generálja az egyes oldalszámokat képviselő listaelemeket. Feltételes logikát alkalmaz annak meghatározására, hogy mely oldalszámokat kell megjeleníteni a meghatározott maximális és minimális oldalszámok korlátai alapján.

Végül adja hozzá a következő és előző gomb kódját.

const handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
ha (jelenlegi Oldal + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
ha ((aktuális oldal - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

A navigációs gombok megjelenítéséhez frissítse a JSX elemeket az alábbiak szerint:

Visszatérés (
 <>
 Lapozási komponens</h1> 
>
 {displayData (pageItems)}
"oldalszámok">




 onClick={handlePrevbtn}
 disable={currentPage == oldalak[0]? igaz: hamis}
 > Előző
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 Disabled={jelenlegi Oldal == oldalak[oldalak.hossza - 1]? igaz: hamis}
 > Tovább
 </button>
 </li>
 </ul>
 </>
 );

Miután az összetevő megjelenik, megjelenik az oldalszámok, az előző és a következő gombok, valamint az aktuális oldal megfelelő adatelemei.

Választás a lapozási könyvtárak és az egyéni lapozási rendszerek között

Amikor arról kell dönteni, hogy lapozási könyvtárakat használjunk, vagy egyedi lapozási rendszert építsünk, a választás számos tényezőtől függ. A lapozási könyvtárak, mint például a react-paginate, előre elkészített összetevőket és funkciókat biztosítanak, amelyek lehetővé teszik a gyors és egyszerű megvalósítást.

Másrészt egy egyedi lapozási rendszer felépítése a React hook segítségével nagyobb rugalmasságot és irányítást biztosít a lapozási logika és a felhasználói felület felett. A döntés végső soron az Ön egyedi igényeitől és preferenciáitól függ.