Webapplikationer håndterer store mængder data. For eksempel viser e-handelsapplikationer milliarder af data på en måde, der er både organiseret og visuelt tiltalende. Grundlæggende skal dataene præsenteres på en måde, der er let for brugerne at forstå og navigere i.

Gengivelse af alle data på en enkelt side kan dog føre til ydeevneproblemer, langsommere indlæsningstider og dårlige brugeroplevelser. Af denne grund kan implementering af pagineringslogik afhjælpe disse problemer betydeligt.

I React kan du vælge at bruge forudbyggede komponenter leveret af pagineringsbiblioteker, alternativt kan du bygge et brugerdefineret pagineringssystem ved hjælp af React hooks.

Implementering af paginering på klientsiden

Der er to måder at implementere paginering i applikationer: paginering på klientsiden og serversiden. Ikke desto mindre, uanset hvilket format du vælger, forbliver det underliggende koncept det samme. Paginering på klientsiden involverer håndtering af pagineringslogikken på klientsiden i brugerens browser.

Du kan implementere paginering på klientsiden ved hjælp af forskellige teknikker. Disse teknikker omfatter:

1. Sidebaseret paginering: Denne metode involverer opdeling af data i faste bidder eller sider, der typisk viser et vist antal elementer pr. side. Brugere kan navigere gennem siderne ved hjælp af navigationslinks eller knapper, mærket med sidetal eller forrige og næste knapper. Dette er en populær implementering med søgemaskiner og e-handelsapplikationer.
2. Uendelig rulning: Denne metode involverer dynamisk indlæsning og gengivelse af nye data, mens brugeren ruller ned på siden, hvilket skaber en problemfri og kontinuerlig browsingoplevelse. Denne teknik er især nyttig, når man har at gøre med store datasæt, der løbende udvides, såsom feeds på sociale medier.

Implementering af sidebaseret paginering ved hjælp af React Hooks

For at komme i gang skal du oprette et React-projekt. Du kan enten bruge create-react-app JavaScript-kommando til at konfigurere en grundlæggende React-applokalt eller bruge Vite til at stilladsere et React-projekt på din maskine.

Denne tutorial har brugt Vite, du kan finde dette projekts kode i denne GitHub-depot.

Efter opsætning af dit React-projekt, lad os fortsætte med at implementere sidebaseret paginering ved hjælp af React Hooks.

Konfiguration af datasættet

Ideelt set ville du typisk hente og vise data fra en database. Men til denne tutorial henter du data fra en dummy JSONPlaceholder API i stedet.

I src mappe, skal du oprette en ny komponenter/paginering fil, og tilføj følgende kode.

1. Opret en React funktionel komponent og definer følgende tilstande.

   importere Reager, { useEffect, useState } fra"reagere";
   importere"./style.component.css";
   fungereSideinddeling() {
   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);
   Vend tilbage (
    <>
   
    Sideinddelingskomponent</h1> 
   >
   
    </>
    );
   }
   eksportStandard Paginering;

2. Implementer logikken til at hente data fra dummy API. Inde i Sideinddeling komponent, tilføj nedenstående.

    useEffect(() => {
    hente(" https://jsonplaceholder.typicode.com/todos")
    .derefter((respons) => response.json())
    .derefter((json) => setData (json));
    }, []);
   konst displayData = (data) => {
   Vend tilbage (
   
   
    {data.length > 0 &&
    data.map((gøremål, indeks) => {
   Vend tilbage<linøgle={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Ovenstående kode tjener to hovedformål. Først, når komponenten er monteret, vil den useEffect hook-triggere for at hente data fra det eksterne API-slutpunkt, som derefter konverteres til JSON-format. De resulterende JSON-data bruges derefter til at opdatere data tilstandsvariabel med de hentede gøremålsdata. For det andet vise Data funktion vil tage de hentede data som et argument og gengive dataene som en uordnet liste over gøremål.
3. I retursegmentet af Sideinddeling komponent, omfatter vise Data funktion til at gengive de hentede data i browseren. Her er en opdateret version af koden:

   Vend tilbage (
    <>
    Sideinddelingskomponent</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Ved at ringe displayData (data) inden for JSX-elementet og passerer data tilstandsvariabel som en parameter, vil funktionen så gengive de hentede data som en uordnet liste i browseren.

I dette særlige tilfælde består den gengivne liste af to hundrede gøremål. Men i scenarier i den virkelige verden vil applikationer håndtere store mængder data. Visning af alle disse data på en enkelt webside kan resultere i ydeevneproblemer, såsom langsomme indlæsningstider og generelt dårlig applikationsydelse.

For at løse dette ville det være passende at inkorporere pagineringsfunktionalitet for at sikre, at hver side indeholder et begrænset antal elementer, som brugere kan få adgang til separat ved at bruge navigationsknapperne.

Denne tilgang giver brugerne mulighed for at navigere gennem dataene på en mere overskuelig og organiseret måde, hvilket forbedrer applikationens overordnede ydeevne og brugeroplevelse.

Implementering af pagineringslogik til visning af et begrænset antal elementer pr. side

For at bestemme, hvilke to-do-emner der skal gengives på hver side, skal vi implementere den nødvendige logik. Inden du fortsætter, er det dog vigtigt at bestemme det samlede antal sider, der kræves baseret på de tilgængelige gøremål.

For at opnå dette kan du tilføje følgende kode til Sideinddeling komponent:

konst sider = [];
til (lade i = 1; jeg <= Matematik.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Kodestykket ovenfor, itererer gennem data array, beregner det samlede antal sider, der kræves ved at dividere længden af data array efter det ønskede antal elementer pr. side - det oprindelige antal elementer pr. side er indstillet til fem i itemsPerPage stat.

Ikke desto mindre kan du opdatere dette nummer efter behov for at teste logikken. Til sidst føjes hvert sidetal til sider array. Lad os nu implementere logikken for at vise et antal elementer pr. side.

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

Denne kode bestemmer de gøremål, der skal gengives på browsersiden baseret på nuværende side og itemsPerPage variabler – det udtrækker de tilsvarende indekser for sættet af gøremål fra dataarrayet ved hjælp af udsnitsmetoden. Indekserne bruges derefter til at hente de specifikke gøremål, der hører til den ønskede side.

Opdater nu for at vise gøremålene vise Data funktion ved at bestå sideelementer som en parameter. Her er en opdateret version af koden:

Vend tilbage (
 <>
 Sideinddelingskomponent</h1> 
>
 {displayData (pageItems)}
 </>
);

Ved at lave denne opdatering vil vise Data funktionen vil gengive et begrænset antal gøremål på passende måde, hvilket afspejler den aktuelle side.

Strømlining af sideadgang og -navigation med navigationsknapper

For at sikre, at brugerne nemt kan navigere og få adgang til indhold på forskellige sider, skal du tilføje forrige og næste knapper, samt knapper, der angiver de specifikke sidetal.

Lad os først implementere logikken for sidetalsknapperne. I Sideinddeling komponent, skal du tilføje koden nedenfor.

konst handleClick = (begivenhed) => {
 setcurrentPage(Nummer(event.target.id));
 };
konst renderPageNumbers = pages.map((nummer) => {
hvis (tal < maxPageNumberLimit +1 && nummer > minPageNumberLimit) {
Vend tilbage (
 nøgle={nummer}
 id={nummer}
 onClick={handleClick}
 className={currentPage == nummer? "aktiv": nul}
 >
 {nummer}
 </li>
 );
 } andet {
Vend tilbagenul;
 }
 });

Det handleKlik funktion udløses, når en bruger klikker på en sidetalsknap. Denne handling opdaterer derefter nuværende side tilstandsvariabel med det valgte sidetal.

Det gengivSidenumre variabel bruger kort metode til at iterere over sider array og genererer dynamisk listeelementer, der repræsenterer hvert sidetal. Den anvender betinget logik til at bestemme, hvilke sidetal der skal gengives baseret på de definerede maksimum- og minimumssidetals grænser.

Tilføj endelig koden for den næste og forrige knap.

konst handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
hvis (nuværende Side + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
hvis ((nuværende side - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

For at gengive navigationsknapperne skal du opdatere JSX-elementerne som følger:

Vend tilbage (
 <>
 Sideinddelingskomponent</h1> 
>
 {displayData (pageItems)}
"sidenumre">




 onClick={handlePrevbtn}
 disabled={currentPage == sider[0]? rigtigt: falsk}
 > Forrige
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == sider[pages.length - 1]? rigtigt: falsk}
 > Næste
 </button>
 </li>
 </ul>
 </>
 );

Når komponenten er gengivet, vil den vise sidetal, forrige og næste knapper og de tilsvarende dataelementer for den aktuelle side.

At vælge mellem sideinddelingsbiblioteker og brugerdefinerede sideinddelingssystemer

Når det kommer til at vælge mellem at bruge pagineringsbiblioteker eller bygge et brugerdefineret pagineringssystem, afhænger valget af forskellige faktorer. Sideinddelingsbiblioteker, såsom react-pagete, leverer forudbyggede komponenter og funktionalitet, hvilket muliggør hurtig og ligetil implementering.

På den anden side giver opbygning af et brugerdefineret pagineringssystem ved hjælp af React hooks mere fleksibilitet og kontrol over pagineringslogikken og brugergrænsefladen. Beslutningen vil i sidste ende afhænge af dine specifikke behov og præferencer.