Veebirakendused haldavad suuri andmemahtusid. Näiteks kuvavad e-kaubanduse rakendused miljardeid andmeid viisil, mis on nii organiseeritud kui ka visuaalselt atraktiivne. Põhimõtteliselt tuleb andmed esitada nii, et kasutajatel oleks neid lihtne mõista ja navigeerida.

Kõigi andmete ühele lehele renderdamine võib aga põhjustada jõudlusprobleeme, aeglasemaid laadimisaegu ja kehva kasutuskogemust. Sel põhjusel võib lehekülgede loogika rakendamine neid probleeme oluliselt leevendada.

Teenuses React saate kasutada leheküljenumbriteekide pakutavaid eelehitatud komponente, teise võimalusena saate Reacti konksude abil luua kohandatud lehekülgede otsimise süsteemi.

Kliendipoolse lehekülgede rakendamine

Lehtede lehitsemise rakendamiseks rakendustes on kaks võimalust: kliendipoolne ja serveripoolne lehekülg. Olenemata valitud vormingust jääb selle aluseks olev kontseptsioon siiski samaks. Kliendipoolne lehekülgede otsimine hõlmab lehekülgede otsimise loogika käsitlemist kliendi poolel, kasutaja brauseris.

Kliendipoolset lehekülgedega lehte saate rakendada erinevate tehnikate abil. Need tehnikad hõlmavad järgmist:

1. Leheküljepõhine lehekülgede jagamine: see meetod hõlmab andmete jagamist fikseeritud suurusega tükkideks või lehtedeks, kuvades tavaliselt teatud arvu üksusi ühel lehel. Kasutajad saavad lehtedel navigeerida navigeerimislinkide või nuppude abil, mis on tähistatud leheküljenumbrite või nuppudega Eelmine ja Järgmine. See on populaarne rakendus otsingumootorites ja e-kaubanduse rakendustes.
2. Lõpmatu kerimine: see meetod hõlmab uute andmete dünaamilist laadimist ja renderdamist, kui kasutaja lehte alla kerib, luues sujuva ja pideva sirvimiskogemuse. See tehnika on eriti kasulik, kui käsitlete suuri andmekogumeid, mis pidevalt laienevad, näiteks sotsiaalmeedia voogudega.

Leheküljepõhise lehekülgede kasutamine React Hookide abil

Alustamiseks looge Reacti projekt. Võite kasutada kas Create-react-app JavaScripti käsk põhilise React-rakenduse seadistamisekskohapeal või kasutada Vitet Reacti projekti karkassiks teie masinal.

Selles õpetuses on kasutatud Vitet, selle projekti koodi leiate siit GitHubi hoidla.

Pärast Reacti projekti seadistamist jätkame lehepõhise lehekülgede kasutamisega kasutades React Hooks.

Andmestiku seadistamine

Ideaalis tooksite ja kuvaksite tavaliselt andmeid andmebaasist. Selle õpetuse jaoks hankite andmed aga näidisest JSONPlaceholder API selle asemel.

Aastal src kataloog, looge uus komponendid/leheküljed faili ja lisage järgmine kood.

1. Looge Reacti funktsionaalne komponent ja määrake järgmised olekud.

   importida Reageerida, { useEffect, useState } alates"reageerida";
   importida"./style.component.css";
   funktsiooniLeheküljed() {
   konst [andmed, 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);
   tagasi (
    <>
   
    Lehekülgede komponent</h1> 
   >
   
    </>
    );
   }
   eksportidavaikimisi Leheküljed;

2. Rakendage näiv API-st andmete toomise loogika. Sees Leheküljed komponent, lisage allpool.

    useEffect(() => {
    tõmba(" https://jsonplaceholder.typicode.com/todos")
    .hen((vastuseks) => response.json())
    .hen((json) => setData (json));
    }, []);
   konst displayData = (andmeid) => {
   tagasi (
   
   
    {data.length > 0 &&
    data.map((teha, indeks) => {
   tagasi<livõti={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Ülaltoodud kood teenib kahte peamist eesmärki. Esiteks, kui komponent on kinnitatud, useEffect konks käivitab andmete toomiseks välisest API lõpp-punktist, mis seejärel teisendatakse JSON-vormingusse. Saadud JSON-andmeid kasutatakse seejärel faili värskendamiseks andmeid olekumuutuja koos toodud ülesannete andmetega. Teiseks, displayData Funktsioon võtab toodud andmed argumendina ja muudab andmed ülesannete järjestamata loendina.
3. Tagastussegmendis Leheküljed komponent, sealhulgas displayData funktsioon toodud andmete brauseris renderdamiseks. Siin on koodi värskendatud versioon:

   tagasi (
    <>
    Lehekülgede komponent</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Helistades displayData (andmed) JSX elemendi sees ja läbides andmeid olekumuutuja parameetrina, renderdab funktsioon hangitud andmed brauseris järjestamata loendina.

Sel konkreetsel juhul koosneb renderdatud loend kahesajast ülesandest. Reaalse maailma stsenaariumide korral haldavad rakendused aga suuri andmemahtusid. Kõigi nende andmete kuvamine ühel veebilehel võib põhjustada jõudlusprobleeme, nagu aeglane laadimisaeg ja üldine rakenduse halb jõudlus.

Selle probleemi lahendamiseks oleks sobiv lisada lehekülgede jagamise funktsioon, et igal lehel oleks piiratud arv üksusi, millele kasutajad saavad navigeerimisnuppude abil eraldi juurde pääseda.

See lähenemisviis võimaldab kasutajatel andmetes paremini hallata ja organiseerida, parandades rakenduse üldist jõudlust ja kasutuskogemust.

Lehekülje loogika rakendamine piiratud arvu üksuste kuvamiseks lehel

Et määrata, millised ülesanded igal lehel renderdatakse, peame rakendama vajaliku loogika. Enne jätkamist on aga hädavajalik määrata kindlaks vajalike lehtede koguarv olemasolevate ülesannete põhjal.

Selle saavutamiseks saate lisada järgmise koodi Leheküljed komponent:

konst lehed = [];
jaoks (lase i = 1; mina <= matemaatika.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Ülaltoodud koodilõik kordub läbi andmeid massiivi, arvutades vajalike lehtede koguarvu, jagades pikkuse andmeid massiivi soovitud üksuste arvu järgi lehel – algseks üksuste arvuks lehel on määratud viis üksusedLehel olek.

Sellegipoolest saate loogika testimiseks seda numbrit vajadusel värskendada. Lõpuks lisatakse iga lehekülje number lehekülgi massiivi. Nüüd rakendame loogikat mitme üksuse kuvamiseks lehel.

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

See kood määrab kindlaks ülesanded, mille põhjal brauseri lehel renderdada Käesolev lehekülg ja üksusedLehel muutujad – see ekstraheerib andmemassiivist ülesandekomplekti vastavad indeksid, kasutades viilumeetodit. Seejärel kasutatakse indekseid soovitud lehele kuuluvate konkreetsete ülesannete hankimiseks.

Nüüd, et kuvada ülesanded, värskendage displayData funktsiooni läbides lehtItems parameetrina. Siin on koodi värskendatud versioon:

tagasi (
 <>
 Lehekülgede komponent</h1> 
>
 {displayData (pageItems)}
 </>
);

Selle värskenduse tegemisel displayData funktsioon renderdab piiratud arvu ülesandeid asjakohaselt, kajastades praegust lehte.

Leheküljele juurdepääsu ja navigeerimise sujuvamaks muutmine navigeerimisnuppudega

Selleks, et kasutajad saaksid erinevatel lehtedel hõlpsasti liikuda ja sisule juurde pääseda, peate lisama nupud Eelmine ja Järgmine, samuti nupud, mis määravad konkreetsed leheküljenumbrid.

Esmalt rakendame leheküljenumbrite nuppude loogikat. Aastal Leheküljed lisage allolev kood.

konst käepideClick = (sündmus) => {
 setcurrentPage(Number(sündmus.sihtmärk.id));
 };
konst renderPageNumbers = pages.map((number) => {
kui (arv < maxPageNumberLimit +1 && number > minPageNumberLimit) {
tagasi (
 võti={number}
 id={number}
 onClick={handleClick}
 className={praegune leht == number? "aktiivne": null}
 >
 {number}
 </li>
 );
 } muidu {
tagasinull;
 }
 });

The käepide Klõpsake funktsioon käivitub, kui kasutaja klõpsab leheküljenumbri nuppu. See toiming värskendab seejärel Käesolev lehekülg olekumuutuja valitud leheküljenumbriga.

The renderPageNumbers muutuja kasutab kaart kordamise meetod lehekülgi massiivi ja genereerib dünaamiliselt iga leheküljenumbrit esindavad loendiüksused. See rakendab tingimusloogikat, et määrata kindlaks, millised leheküljenumbrid renderdada, lähtudes defineeritud maksimaalse ja minimaalse leheküljenumbrite piirangutest.

Lõpuks lisage järgmise ja eelmise nupu kood.

konst handNextbtn = () => {
 setcurrentPage (praegune leht + 1);
kui (praegune leht + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst käepidePrevbtn = () => {
 setcurrentPage (praegune leht - 1);
kui ((Käesolev lehekülg - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Navigeerimisnuppude renderdamiseks värskendage JSX-i elemente järgmiselt.

tagasi (
 <>
 Lehekülgede komponent</h1> 
>
 {displayData (pageItems)}
"lehenumbrid">




 onClick={handlePrevbtn}
 keelatud={praegune leht == lehed[0]? tõsi: vale}
 > Eelmine
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 keelatud={praegune leht == lehed[lehed.pikkus - 1]? tõsi: vale}
 > Järgmine
 </button>
 </li>
 </ul>
 </>
 );

Kui komponent on renderdatud, kuvab see praeguse lehe leheküljenumbrid, nupud eelmine ja järgmine ning vastavad andmeüksused.

Lehekülgede raamatukogude ja kohandatud leheküljelehtede vahel valimine

Lehekülgede teekide kasutamise või kohandatud leheküljenumbrite süsteemi loomise vahel otsustamisel sõltub valik erinevatest teguritest. Lehekülgede teegid, nagu näiteks react-paginate, pakuvad eelehitatud komponente ja funktsioone, mis võimaldavad kiiret ja lihtsat rakendamist.

Teisest küljest pakub kohandatud lehekülgede otsimise süsteemi loomine Reacti konksude abil suuremat paindlikkust ja kontrolli lehekülgede loogika ja kasutajaliidese üle. Otsus sõltub lõpuks teie konkreetsetest vajadustest ja eelistustest.