Žiniatinklio programos valdo didelius duomenų kiekius. Pavyzdžiui, elektroninės prekybos programos rodo milijardus duomenų taip, kad jie būtų sutvarkyti ir vizualiai patrauklūs. Iš esmės duomenys turi būti pateikti taip, kad vartotojams būtų lengva suprasti ir naršyti.

Tačiau pateikiant visus duomenis viename puslapyje gali kilti našumo problemų, sulėtėti įkėlimo laikas ir prastos vartotojo patirties. Dėl šios priežasties puslapių skirstymo logikos įdiegimas gali žymiai sumažinti šias problemas.

React galite pasirinkti naudoti iš anksto sukurtus puslapių bibliotekų pateiktus komponentus arba galite sukurti pasirinktinę puslapių rūšiavimo sistemą naudodami React kabliukus.

Kliento puslapių spausdinimo įgyvendinimas

Yra du būdai, kaip pritaikyti puslapių puslapius programose: kliento ir serverio puslapių numeravimas. Nepaisant to, nepaisant pasirinkto formato, pagrindinė koncepcija išlieka ta pati. Kliento puslapių numeravimas apima puslapių numeravimo logikos tvarkymą kliento pusėje, vartotojo naršyklėje.

Galite įgyvendinti kliento puslapių puslapius naudodami įvairius metodus. Šie metodai apima:

1. Puslapių numeravimas: Šis metodas apima duomenų padalijimą į fiksuoto dydžio dalis arba puslapius, paprastai viename puslapyje pateikiant tam tikrą elementų skaičių. Vartotojai gali naršyti puslapiuose naudodami naršymo nuorodas arba mygtukus, pažymėtus puslapių numeriais arba mygtukais ankstesnis ir kitas. Tai populiarus paieškos sistemų ir el. prekybos programų diegimas.
2. Begalinis slinkimas: Šis metodas apima dinamišką naujų duomenų įkėlimą ir pateikimą, kai vartotojas slenka puslapiu žemyn, taip sukuriant sklandų ir nuolatinį naršymą. Šis metodas ypač naudingas dirbant su dideliais duomenų rinkiniais, kurie nuolat plečiasi, pvz., socialinės žiniasklaidos kanalus.

Puslapio puslapių kūrimo įgyvendinimas naudojant „React Hooks“.

Norėdami pradėti, sukurkite „React“ projektą. Galite naudoti arba „Create-react-app“ „JavaScript“ komanda, kad nustatytų pagrindinę „React“ programąvietoje arba panaudoti Vite React projektui sukurti savo mašinoje.

Šiame vadove buvo panaudota Vite, šio projekto kodą rasite čia GitHub saugykla.

Nustatę „React“ projektą, pradėkime puslapių puslapių puslapių kūrimą naudojant React Hooks.

Duomenų rinkinio konfigūravimas

Idealiu atveju paprastai gautumėte ir rodytumėte duomenis iš duomenų bazės. Tačiau šiai mokymo programai duomenis gausite iš manekeno JSONPlaceholder API vietoj to.

Viduje src katalogą, sukurkite naują komponentai / puslapiai failą ir pridėkite šį kodą.

1. Sukurkite „React“ funkcinį komponentą ir apibrėžkite šias būsenas.

   importuoti Reaguoti, { useEffect, useState } iš"reaguoti";
   importuoti"./style.component.css";
   funkcijaPuslapių rašymas() {
   konst [duomenys, 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);
   grąžinti (
    <>
   
    Puslapių spausdinimo komponentas</h1> 
   >
   
    </>
    );
   }
   eksportuotinumatytas Puslapių spausdinimas;

2. Įdiekite logiką, kad gautumėte duomenis iš fiktyvios API. Viduje Puslapių rašymas komponentas, pridėkite žemiau.

    useEffect (() => {
    atnešti (" https://jsonplaceholder.typicode.com/todos")
    .thena((atsakymą) => response.json())
    .thena((json) => setData (json));
    }, []);
   konst displayData = (duomenis) => {
   grąžinti (
   
   
    {data.length> 0 &&
    data.map((todo, indeksas) => {
   grąžinti<liRaktas={indeksas}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Aukščiau pateiktas kodas skirtas dviem pagrindiniais tikslais. Pirma, kai komponentas pritvirtinamas, naudojimoEfektas „hook“ paleidikliai, norint gauti duomenis iš išorinio API galinio taško, kuris vėliau konvertuojamas į JSON formatą. Tada gauti JSON duomenys naudojami atnaujinti duomenis būsenos kintamasis su gautais darbų duomenimis. Antra, displayData funkcija ims gautus duomenis kaip argumentą ir pateiks duomenis kaip netvarkingą darbų sąrašą.
3. Grįžimo segmente Puslapių rašymas komponentas, apima displayData funkcija, skirta gautiems duomenims pateikti naršyklėje. Štai atnaujinta kodo versija:

   grąžinti (
    <>
    Puslapių spausdinimo komponentas</h1> 
   >
    {displayData (duomenys)}
    </>
   );
   

   Paskambinus displayData (duomenys) JSX elemente ir perduodant duomenis būsenos kintamąjį kaip parametrą, tada funkcija pateiks gautus duomenis kaip nesutvarkytą sąrašą naršyklėje.

Šiuo konkrečiu atveju pateiktas sąrašas susideda iš dviejų šimtų darbų. Tačiau realaus pasaulio scenarijuose programos valdys didelius duomenų kiekius. Pateikus visus šiuos duomenis viename tinklalapyje, gali kilti našumo problemų, pvz., lėtas įkėlimas ir apskritai prastas programos veikimas.

Kad tai būtų išspręsta, būtų tinkama įtraukti puslapių rūšiavimo funkciją, kad kiekviename puslapyje būtų ribotas elementų, kuriuos vartotojai galėtų pasiekti atskirai naudodami naršymo mygtukus, skaičius.

Šis metodas leidžia vartotojams lengviau valdyti ir tvarkyti duomenis, taip pagerinant bendrą programos našumą ir vartotojo patirtį.

Puslapių numeravimo logikos įgyvendinimas, kad būtų rodomas ribotas elementų skaičius puslapyje

Norėdami nustatyti, kurie darbų elementai bus pateikti kiekviename puslapyje, turime įdiegti reikiamą logiką. Tačiau prieš tęsiant būtina nustatyti bendrą reikalingą puslapių skaičių, atsižvelgiant į turimus darbus.

Norėdami tai pasiekti, galite pridėti šį kodą Puslapių rašymas komponentas:

konst puslapiai = [];
dėl (leisti aš = 1; aš <= Matematika.ceil (data.length / itemsPerPage); i++) {
 puslapiai.push (i);
 }

Aukščiau pateiktas kodo fragmentas kartojasi per duomenis masyvą, apskaičiuojant bendrą reikalingų puslapių skaičių padalijus ilgį duomenis masyvas pagal norimą elementų skaičių puslapyje – pradinis elementų skaičius puslapyje nustatytas į penkis itemsPerPage valstybė.

Nepaisant to, galite atnaujinti šį skaičių, jei reikia, kad patikrintumėte logiką. Galiausiai kiekvienas puslapio numeris pridedamas prie puslapių masyvas. Dabar įgyvendinkime elementų skaičiaus viename puslapyje rodymo logiką.

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

Šis kodas nustato užduotis, kurias reikia pateikti naršyklės puslapyje Dabartinis puslapis ir itemsPerPage kintamieji – iš duomenų masyvo ištraukia atitinkamus užduočių rinkinio indeksus, naudodama skilties metodą. Tada indeksai naudojami norint gauti konkrečius darbus, priklausančius norimam puslapiui.

Dabar, kad būtų rodomi darbai, atnaujinkite displayData funkcija praleidžiant puslapisElementai kaip parametras. Štai atnaujinta kodo versija:

grąžinti (
 <>
 Puslapių spausdinimo komponentas</h1> 
>
 {displayData (pageItems)}
 </>
);

Atlikdami šį atnaujinimą, displayData funkcija tinkamai pateiks ribotą užduočių skaičių, atspindintį dabartinį puslapį.

Prieigos prie puslapio ir naršymo supaprastinimas naudojant naršymo mygtukus

Kad vartotojai galėtų lengvai naršyti ir pasiekti turinį skirtinguose puslapiuose, turite pridėti mygtukus ankstesnis ir kitas, taip pat mygtukus, nurodančius konkrečius puslapių numerius.

Pirma, įgyvendinkime puslapių numerių mygtukų logiką. Viduje Puslapių rašymas komponentas, pridėkite kodą žemiau.

konst rankenaSpustelėkite = (renginys) => {
 setcurrentPage(Skaičius(įvykis.target.id));
 };
konst renderPageNumbers = puslapiai.map((numerį) => {
jeigu (skaičius < maxPageNumberLimit +1 && numeris > minPageNumberLimit) {
grąžinti (
 raktas={numeris}
 id={numeris}
 onClick={handleClick}
 className={currentPage == numeris? "aktyvus": nulinis}
 >
 {numeris}
 </li>
 );
 } Kitas {
grąžintinulinis;
 }
 });

The rankenaSpustelėkite funkcija suaktyvinama, kai vartotojas spusteli puslapio numerio mygtuką. Tada šis veiksmas atnaujina Dabartinis puslapis būsenos kintamasis su pasirinktu puslapio numeriu.

The renderPageNumbers kintamasis naudoja žemėlapį metodas kartoti per puslapių masyvą ir dinamiškai generuoja sąrašo elementus, vaizduojančius kiekvieną puslapio numerį. Taikoma sąlyginė logika, kad nustatytų, kuriuos puslapių numerius pateikti, remiantis apibrėžtomis didžiausiomis ir mažiausiomis puslapių numerių ribomis.

Galiausiai pridėkite kito ir ankstesnio mygtukų kodą.

konst rankenaNextbtn = () => {
 setcurrentPage (currentPage + 1);
jeigu (dabartinis puslapis + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst rankenaPrevbtn = () => {
 setcurrentPage (currentPage - 1);
jeigu ((Dabartinis puslapis - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit – pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Norėdami pateikti naršymo mygtukus, atnaujinkite JSX elementus taip:

grąžinti (
 <>
 Puslapių spausdinimo komponentas</h1> 
>
 {displayData (pageItems)}
"puslapių numeriai">




 onClick={handlePrevbtn}
 išjungtas={dabartinis puslapis == puslapiai[0]? tiesa: klaidinga}
 > Ankstesnis
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 išjungtas={dabartinis puslapis == puslapiai[puslapiai.ilgis - 1]? tiesa: klaidinga}
 > Kitas
 </button>
 </li>
 </ul>
 </>
 );

Kai komponentas bus pateiktas, jame bus rodomi puslapių numeriai, ankstesnio ir kito mygtukai bei atitinkami dabartinio puslapio duomenų elementai.

Pasirinkimas tarp puslapių spausdinimo bibliotekų ir tinkintų puslapių spausdinimo sistemų

Kai reikia nuspręsti, ar naudoti puslapių bibliotekas ar sukurti pasirinktinę puslapių numeravimo sistemą, pasirinkimas priklauso nuo įvairių veiksnių. Puslapių spausdinimo bibliotekos, pvz., react-paginate, teikia iš anksto sukurtus komponentus ir funkcijas, leidžiančias greitai ir nesudėtingai įdiegti.

Kita vertus, sukūrus pasirinktinę puslapių rūšiavimo sistemą naudojant „React hooks“ galima daugiau lankstumo ir valdyti puslapių rūšiavimo logiką bei vartotojo sąsają. Sprendimas galiausiai priklausys nuo jūsų konkrečių poreikių ir pageidavimų.