Webapplicaties beheren grote hoeveelheden data. E-commerce-applicaties geven bijvoorbeeld miljarden gegevens weer op een manier die zowel georganiseerd als visueel aantrekkelijk is. In wezen moeten de gegevens worden gepresenteerd op een manier die voor gebruikers gemakkelijk te begrijpen en te navigeren is.

Het weergeven van alle gegevens op één pagina kan echter leiden tot prestatieproblemen, tragere laadtijden en slechte gebruikerservaringen. Om deze reden kan het implementeren van pagineringslogica deze problemen aanzienlijk verlichten.

In React kun je ervoor kiezen om vooraf gebouwde componenten te gebruiken die worden geleverd door pagineringsbibliotheken, of je kunt een aangepast pagineringssysteem bouwen met behulp van React-hooks.

Client-side paginering implementeren

Er zijn twee manieren om paginering in toepassingen te implementeren: paginering aan de clientzijde en aan de serverzijde. Desalniettemin, ongeacht het formaat dat u kiest, blijft het onderliggende concept hetzelfde. Paginering aan de clientzijde omvat het afhandelen van de pagineringslogica aan de clientzijde, in de browser van de gebruiker.

U kunt paginering aan de clientzijde implementeren met behulp van verschillende technieken. Deze technieken omvatten:

1. Pagina-gebaseerde paginering: Bij deze methode worden de gegevens verdeeld in stukken of pagina's van vaste grootte, waarbij doorgaans een bepaald aantal items per pagina wordt weergegeven. Gebruikers kunnen door de pagina's navigeren met behulp van navigatielinks of knoppen, gelabeld met paginanummers of vorige en volgende knoppen. Dit is een populaire implementatie bij zoekmachines en e-commercetoepassingen.
2. Oneindig scrollen: Bij deze methode worden nieuwe gegevens dynamisch geladen en weergegeven terwijl de gebruiker naar beneden scrolt op de pagina, waardoor een naadloze en continue browse-ervaring wordt gecreëerd. Deze techniek is met name handig bij het omgaan met grote datasets die voortdurend worden uitgebreid, zoals feeds van sociale media.

Pagina-gebaseerde paginering implementeren met behulp van React Hooks

Maak om te beginnen een React-project aan. U kunt ofwel de create-react-app JavaScript-opdracht om een ​​eenvoudige React-app in te stellenplaatselijk of gebruik Vite om een ​​React-project te ondersteunen op uw apparaat.

Deze tutorial heeft Vite gebruikt, je kunt de code van dit project hierin vinden GitHub-opslagplaats.

Laten we na het opzetten van uw React-project doorgaan met het implementeren van op pagina's gebaseerde paginering met behulp van React Hooks.

De dataset configureren

Idealiter haalt u gegevens uit een database op en geeft u deze weer. Voor deze zelfstudie haalt u echter gegevens op van een dummy JSONPlaceholder-API in plaats van.

In de src map, maak een nieuwe componenten/paginering bestand en voeg de volgende code toe.

1. Maak een functionele React-component en definieer de volgende statussen.

   importeren Reageren, { useEffect, useState } van"Reageer";
   importeren"./style.component.css";
   functiePaginering() {
   const [data, setData] = useState([]);
   const [huidigePagina, stelhuidigePagina in] = useState(1);
   const [itemsPerPagina, setitemsPerPagina] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   opbrengst (
    <>
   
    Pagineringscomponent</h1> 
   >
   
    </>
    );
   }
   exporterenstandaard Paginering;

2. Implementeer de logica om gegevens op te halen uit de dummy-API. Binnen in de Paginering component, voeg onderstaande toe.

    gebruikEffect(() => {
    ophalen(" https://jsonplaceholder.typicode.com/todos")
    .Dan((antwoord) => reactie.json())
    .Dan((json) => setData (json));
    }, []);
   const displayData = (gegevens) => {
   opbrengst (
   
   
    {data.lengte > 0 &&
    gegevens.map((doe, index) => {
   opbrengst<lisleutel={inhoudsopgave}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   De bovenstaande code heeft twee hoofddoelen. Ten eerste, zodra het onderdeel is gemonteerd, wordt het gebruikEffect hook-triggers om gegevens op te halen van het externe API-eindpunt dat vervolgens wordt geconverteerd naar JSON-indeling. De resulterende JSON-gegevens worden vervolgens gebruikt om de gegevens state-variabele met de opgehaalde takengegevens. Ten tweede, de gegevens weergeven functie neemt de opgehaalde gegevens als een argument en geeft de gegevens weer als een ongeordende lijst met taken.
3. In het retoursegment van de Paginering onderdeel, omvatten de gegevens weergeven functie om de opgehaalde gegevens in de browser weer te geven. Hier is een bijgewerkte versie van de code:

   opbrengst (
    <>
    Pagineringscomponent</h1> 
   >
    {displayData (gegevens)}
    </>
   );
   

   Door te bellen displayData (gegevens) binnen het JSX-element en het passeren van de gegevens state-variabele als een parameter, zal de functie de opgehaalde gegevens vervolgens weergeven als een ongeordende lijst in de browser.

In dit specifieke geval bestaat de weergegeven lijst uit tweehonderd taken. In real-world scenario's zullen applicaties echter grote hoeveelheden gegevens beheren. Als al deze gegevens op één webpagina worden weergegeven, kan dit leiden tot prestatieproblemen, zoals trage laadtijden en over het algemeen slechte prestaties van applicaties.

Om dit aan te pakken, zou het geschikt zijn om pagineringsfunctionaliteit op te nemen om ervoor te zorgen dat elke pagina een beperkt aantal items bevat waartoe gebruikers afzonderlijk toegang hebben met behulp van de navigatieknoppen.

Deze aanpak stelt gebruikers in staat om op een meer beheersbare en georganiseerde manier door de gegevens te navigeren, waardoor de algehele prestaties en gebruikerservaring van de applicatie worden verbeterd.

Implementatie van pagineringslogica voor het weergeven van een beperkt aantal items per pagina

Om te bepalen welke actiepunten op elke pagina worden weergegeven, moeten we de nodige logica implementeren. Voordat u verder gaat, is het echter essentieel om het totale aantal vereiste pagina's te bepalen op basis van de beschikbare actiepunten.

Om dit te bereiken, kunt u de volgende code toevoegen aan het Paginering bestanddeel:

const pagina's = [];
voor (laten ik = 1; ik <= Wiskunde.ceil (data.lengte / itemsPerPage); ik++) {
 pagina's.push (i);
 }

Het bovenstaande codefragment herhaalt zich door het gegevens array, waarbij het totale aantal benodigde pagina's wordt berekend door de lengte van de gegevens array op basis van het gewenste aantal items per pagina - het aanvankelijke aantal items per pagina is ingesteld op vijf in de Artikelen per pagina staat.

Desalniettemin kunt u dit nummer indien nodig bijwerken om de logica te testen. Ten slotte wordt elk paginanummer toegevoegd aan de Pagina's reeks. Laten we nu de logica implementeren voor het weergeven van een aantal items per pagina.

const indexOfLastItem = huidigePagina * itemsPerPagina;
const indexOfFirstItem = indexOfLastItem - itemsPerPagina;
const pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Deze code bepaalt de taken die op de browserpagina moeten worden weergegeven op basis van huidige pagina En Artikelen per pagina variabelen: het extraheert de corresponderende indexen voor de reeks taken uit de data-array met behulp van de slice-methode. De indexen worden vervolgens gebruikt om de specifieke taken op te halen die bij de gewenste pagina horen.

Om de taken weer te geven, werkt u nu het gegevens weergeven functie door het passeren van de paginaItems als parameter. Hier is een bijgewerkte versie van de code:

opbrengst (
 <>
 Pagineringscomponent</h1> 
>
 {displayData (paginaItems)}
 </>
);

Door deze update uit te voeren, is de gegevens weergeven functie zal een beperkt aantal actie-items correct weergeven, als afspiegeling van de huidige pagina.

Toegang tot pagina's en navigatie stroomlijnen met navigatieknoppen

Om ervoor te zorgen dat gebruikers gemakkelijk door verschillende pagina's kunnen navigeren en toegang krijgen tot inhoud, moet u vorige en volgende knoppen toevoegen, evenals knoppen die de specifieke paginanummers specificeren.

Laten we eerst de logica voor de paginanummerknoppen implementeren. In de Paginering component, voeg onderstaande code toe.

const handleClick = (evenement) => {
 stelhuidigePagina(Nummer(gebeurtenis.doel.id));
 };
const renderPageNumbers = pagina's.map((nummer) => {
als (nummer < maxPageNumberLimit +1 && nummer > minPageNumberLimit) {
opbrengst (
 sleutel={nummer}
 id={nummer}
 onClick={handleClick}
 className={currentPage == nummer? "actief": nul}
 >
 {nummer}
 </li>
 );
 } anders {
opbrengstnul;
 }
 });

De handvatKlik functie wordt geactiveerd wanneer een gebruiker op een paginanummerknop klikt. Deze actie werkt vervolgens het huidige pagina state-variabele met het geselecteerde paginanummer.

De renderPageNumbers variabele maakt gebruik van de kaart methode om te herhalen over de Pagina's array en genereert dynamisch lijstitems die elk paginanummer vertegenwoordigen. Het past voorwaardelijke logica toe om te bepalen welke paginanummers moeten worden weergegeven op basis van de gedefinieerde maximum- en minimumlimieten voor paginanummers.

Voeg ten slotte de code toe voor de volgende en vorige knoppen.

const handleNextbtn = () => {
 setcurrentPage (huidigePagina + 1);
als (huidigePagina + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (huidigePagina - 1);
als ((huidige pagina - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Werk de JSX-elementen als volgt bij om de navigatieknoppen weer te geven:

opbrengst (
 <>
 Pagineringscomponent</h1> 
>
 {displayData (paginaItems)}
"paginanummers">




 onClick={handlePrevbtn}
 uitgeschakeld={currentPage == pagina's[0]? WAAR: vals}
 > Vorige
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 uitgeschakeld={currentPage == pagina's[pagina's.lengte - 1]? WAAR: vals}
 > Volgende
 </button>
 </li>
 </ul>
 </>
 );

Zodra de component wordt weergegeven, worden de paginanummers, vorige en volgende knoppen en de bijbehorende gegevensitems voor de huidige pagina weergegeven.

Kiezen tussen pagineringsbibliotheken en aangepaste pagineringssystemen

Als het gaat om de keuze tussen het gebruik van pagineringsbibliotheken of het bouwen van een aangepast pagineringssysteem, hangt de keuze af van verschillende factoren. Pagineringsbibliotheken, zoals react-paginate, bieden kant-en-klare componenten en functionaliteit, waardoor een snelle en eenvoudige implementatie mogelijk is.

Aan de andere kant biedt het bouwen van een aangepast pagineringssysteem met behulp van React-hooks meer flexibiliteit en controle over de pagineringslogica en gebruikersinterface. De beslissing zal uiteindelijk afhangen van uw specifieke behoeften en voorkeuren.