Tīmekļa lietojumprogrammas pārvalda lielu datu apjomu. Piemēram, e-komercijas lietojumprogrammas parāda miljardiem datu tādā veidā, kas ir gan sakārtots, gan vizuāli pievilcīgs. Būtībā dati ir jāparāda tā, lai lietotāji tos varētu viegli saprast un pārvietoties.

Tomēr visu datu renderēšana vienā lapā var izraisīt veiktspējas problēmas, lēnāku ielādes laiku un sliktu lietotāja pieredzi. Šī iemesla dēļ lappušu loģikas ieviešana var ievērojami atvieglot šīs problēmas.

Programmā React varat izvēlēties izmantot iepriekš izveidotos komponentus, ko nodrošina lappušu bibliotēkas, vai arī varat izveidot pielāgotu lappušu sistēmu, izmantojot React āķus.

Klienta puses lappušu ievietošana

Ir divi veidi, kā ieviest lappušu likšanu lietojumprogrammās: klienta un servera puses lapošana. Tomēr neatkarīgi no izvēlētā formāta pamatā esošā koncepcija paliek nemainīga. Klienta puses lappušu veidošana ietver lappušu veidošanas loģikas apstrādi klienta pusē, lietotāja pārlūkprogrammā.

Jūs varat ieviest klienta puses lappušu kārtošanu, izmantojot dažādas metodes. Šīs metodes ietver:

1. Lappuse balstīta lappuse: šī metode ietver datu sadalīšanu fiksēta izmēra gabalos vai lapās, parasti vienā lapā parādot noteiktu vienumu skaitu. Lietotāji var pārvietoties pa lapām, izmantojot navigācijas saites vai pogas, kas apzīmētas ar lappušu numuriem vai iepriekšējās un nākamās pogas. Šī ir populāra ieviešana meklētājprogrammās un e-komercijas lietojumprogrammās.
2. Bezgalīga ritināšana: šī metode ietver jaunu datu dinamisku ielādi un renderēšanu, lietotājam ritinot lapu uz leju, radot nevainojamu un nepārtrauktu pārlūkošanas pieredzi. Šī metode ir īpaši noderīga, strādājot ar lielām datu kopām, kas nepārtraukti paplašinās, piemēram, sociālo mediju plūsmas.

Lapu izvietošanas ieviešana, izmantojot React Hooks

Lai sāktu, izveidojiet React projektu. Varat izmantot vai nu Create-react-app JavaScript komanda, lai iestatītu pamata React lietotnilokāli vai izmantot Vite, lai izveidotu React projektu jūsu mašīnā.

Šajā apmācībā ir izmantota Vite, jūs varat atrast šī projekta kodu GitHub repozitorijs.

Pēc React projekta iestatīšanas turpināsim uz lapām balstītas lappušu ievietošanas ieviešanu izmantojot React Hooks.

Datu kopas konfigurēšana

Ideālā gadījumā jūs parasti ienestu un parādītu datus no datu bāzes. Tomēr šai apmācībai jūs iegūsit datus no manekena JSONPlaceholder API vietā.

Iekš src direktorijā, izveidojiet jaunu komponenti/lappuse failu un pievienojiet šādu kodu.

1. Izveidojiet React funkcionālo komponentu un definējiet šādus stāvokļus.

   imports Reaģēt, { useEffect, useState } no"reaģēt";
   imports"./style.component.css";
   funkcijuLapu šķirošana() {
   konst [dati, 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);
   atgriezties (
    <>
   
    Lapu sadalīšanas komponents</h1> 
   >
   
    </>
    );
   }
   eksportētnoklusējuma Lappuse;

2. Ieviesiet loģiku, lai iegūtu datus no fiktīvas API. Iekšpusē Lapu šķirošana komponentu, pievienojiet tālāk norādīto.

    useEffect(() => {
    atnest(" https://jsonplaceholder.typicode.com/todos")
    .hen((atbildi) => response.json())
    .hen((json) => setData (json));
    }, []);
   konst displayData = (datus) => {
   atgriezties (
   
   
    {data.length> 0 &&
    data.map((todo, indekss) => {
   atgriezties<litaustiņu={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Iepriekš minētais kods kalpo diviem galvenajiem mērķiem. Pirmkārt, kad komponents ir uzstādīts, useEffect āķa aktivizētāji, lai iegūtu datus no ārējā API galapunkta, kas pēc tam tiek pārveidots JSON formātā. Iegūtie JSON dati tiek izmantoti, lai atjauninātu datus stāvokļa mainīgais ar ienestajiem uzdevumu datiem. Otrkārt, displayData funkcija ņems ienestos datus kā argumentu un atveidos datus kā nesakārtotu uzdevumu sarakstu.
3. Atgriešanās segmentā Lapu šķirošana sastāvdaļa, iekļaujiet displayData funkcija, lai pārlūkprogrammā atveidotu ienestos datus. Šeit ir atjaunināta koda versija:

   atgriezties (
    <>
    Lapu sadalīšanas komponents</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Piezvanot displayData (dati) JSX elementā un nododot datus stāvokļa mainīgo kā parametru, funkcija pēc tam atveidos ienestos datus kā nesakārtotu sarakstu pārlūkprogrammā.

Šajā konkrētajā gadījumā renderētais saraksts sastāv no diviem simtiem uzdevumu. Tomēr reālās pasaules scenārijos lietojumprogrammas pārvaldīs lielu datu apjomu. Visu šo datu parādīšana vienā tīmekļa lapā var izraisīt veiktspējas problēmas, piemēram, lēnu ielādes laiku un vispārēju sliktu lietojumprogrammu veiktspēju.

Lai to atrisinātu, būtu piemēroti iekļaut lappušu veidošanas funkcionalitāti, lai nodrošinātu, ka katrā lapā ir ierobežots skaits vienumu, kuriem lietotāji var piekļūt atsevišķi, izmantojot navigācijas pogas.

Šī pieeja ļauj lietotājiem pārvietoties pa datiem vieglāk pārvaldāmā un sakārtotākā veidā, uzlabojot lietojumprogrammas vispārējo veiktspēju un lietotāja pieredzi.

Lapu šķirošanas loģikas ieviešana ierobežota vienumu skaita attēlošanai vienā lapā

Lai noteiktu, kuri uzdevumi tiks atveidoti katrā lapā, mums ir jāievieš nepieciešamā loģika. Tomēr, pirms turpināt, ir svarīgi noteikt kopējo nepieciešamo lappušu skaitu, pamatojoties uz pieejamajiem uzdevumiem.

Lai to panāktu, varat pievienot šādu kodu Lapu šķirošana komponents:

konst lapas = [];
priekš (ļaut i = 1; es <= Matemātika.ceil (data.length / itemsPerPage); i++) {
 lapas.push (i);
 }

Iepriekš minētais koda fragments atkārtojas caur datus masīvs, aprēķinot kopējo nepieciešamo lappušu skaitu, dalot garumu datus masīvs pēc vēlamā vienumu skaita lapā — sākotnējais vienumu skaits lapā ir iestatīts uz pieci vienumiPerPage Valsts.

Tomēr varat atjaunināt šo numuru, lai pārbaudītu loģiku. Visbeidzot, katrs lapas numurs tiek pievienots lapas masīvs. Tagad ieviesīsim loģiku vairāku vienumu parādīšanai vienā lapā.

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

Šis kods nosaka pārlūkprogrammas lapā renderējamos uzdevumus, pamatojoties uz kuriem Pašreizējā lapa un vienumiPerPage mainīgie — tas izvelk atbilstošos indeksus uzdevumu kopai no datu masīva, izmantojot šķēluma metodi. Pēc tam indeksi tiek izmantoti, lai izgūtu konkrētos uzdevumus, kas pieder vēlamajai lapai.

Tagad, lai parādītu uzdevumus, atjauniniet displayData funkciju, nododot lapa Vienumi kā parametrs. Šeit ir atjaunināta koda versija:

atgriezties (
 <>
 Lapu sadalīšanas komponents</h1> 
>
 {displayData (pageItems)}
 </>
);

Veicot šo atjauninājumu, displayData funkcija atbilstoši atveidos ierobežotu skaitu veicamo vienumu, atspoguļojot pašreizējo lapu.

Racionalizējiet piekļuvi lapai un navigāciju ar navigācijas pogām

Lai nodrošinātu lietotājiem ērtu navigāciju un piekļuvi saturam dažādās lapās, jums jāpievieno pogas iepriekšējā un nākamā, kā arī pogas, kas norāda konkrētos lapu numurus.

Vispirms ieviesīsim lappušu numuru pogu loģiku. Iekš Lapu šķirošana komponentu, pievienojiet tālāk norādīto kodu.

konst rokturisNoklikšķiniet = (notikumu) => {
 setcurrentPage(Numurs(event.target.id));
 };
konst renderPageNumbers = pages.map((numuru) => {
ja (skaitlis < maxPageNumberLimit +1 && numurs > minPageNumberLimit) {
atgriezties (
 atslēga={skaitlis}
 id={number}
 onClick={handleClick}
 className={pašreizējāLapa == numurs? "aktīvs": null}
 >
 {number}
 </li>
 );
 } cits {
atgrieztiesnull;
 }
 });

The rokturisNoklikšķiniet funkcija tiek aktivizēta, kad lietotājs noklikšķina uz lapas numura pogas. Pēc tam šī darbība atjaunina Pašreizējā lapa stāvokļa mainīgais ar atlasīto lappuses numuru.

The renderPageNumbers mainīgais izmanto karte metode, kā atkārtot lapas masīvs un dinamiski ģenerē saraksta vienumus, kas attēlo katru lappuses numuru. Tas izmanto nosacījumu loģiku, lai noteiktu, kuri lappušu numuri renderēt, pamatojoties uz definētajiem maksimālā un minimālā lappušu skaita ierobežojumiem.

Visbeidzot pievienojiet nākamās un iepriekšējās pogas kodu.

konst handNextbtn = () => {
 setcurrentPage (currentPage + 1);
ja (pašreizējā lapa + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handPrevbtn = () => {
 setcurrentPage (currentPage - 1);
ja ((Pašreizējā lapa - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit — pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Lai renderētu navigācijas pogas, atjauniniet JSX elementus šādi:

atgriezties (
 <>
 Lapu sadalīšanas komponents</h1> 
>
 {displayData (pageItems)}
"pageNumbers">




 onClick={handlePrevbtn}
 atspējots={pašreizējā lapa == lapas[0]? taisnība: viltus}
 > Iepriekšējais
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 atspējots={pašreizējāLapa == lapas[lapas.garums - 1]? taisnība: viltus}
 > Tālāk
 </button>
 </li>
 </ul>
 </>
 );

Kad komponents ir atveidots, tajā tiks parādīti lappušu numuri, iepriekšējās un nākamās pogas, kā arī atbilstošie pašreizējās lapas datu vienumi.

Lapu šķirošanas bibliotēku un pielāgotu lappušu šķirošanas sistēmu izvēle

Kad ir jāizlemj, vai izmantot lappušu bibliotēkas vai izveidot pielāgotu lappušu sistēmu, izvēle ir atkarīga no dažādiem faktoriem. Lapu šķirošanas bibliotēkas, piemēram, react-paginate, nodrošina iepriekš izveidotus komponentus un funkcionalitāti, kas ļauj ātri un vienkārši ieviest.

No otras puses, pielāgotas lappušu sistēmas izveide, izmantojot React hooks, piedāvā lielāku elastību un kontroli pār lappušu kārtošanas loģiku un lietotāja interfeisu. Galu galā lēmums būs atkarīgs no jūsu īpašajām vajadzībām un vēlmēm.