Webanwendungen verwalten große Datenmengen. Beispielsweise stellen E-Commerce-Anwendungen Milliarden von Daten übersichtlich und optisch ansprechend dar. Im Wesentlichen müssen die Daten so präsentiert werden, dass sie für Benutzer leicht verständlich und navigierbar sind.

Das Rendern aller Daten auf einer einzigen Seite kann jedoch zu Leistungsproblemen, langsameren Ladezeiten und einer schlechten Benutzererfahrung führen. Aus diesem Grund kann die Implementierung einer Paginierungslogik diese Probleme erheblich lindern.

In React können Sie vorgefertigte Komponenten verwenden, die von Paginierungsbibliotheken bereitgestellt werden. Alternativ können Sie mithilfe von React-Hooks ein benutzerdefiniertes Paginierungssystem erstellen.

Implementierung der clientseitigen Paginierung

Es gibt zwei Möglichkeiten, die Paginierung in Anwendungen zu implementieren: clientseitige und serverseitige Paginierung. Unabhängig davon, für welches Format Sie sich entscheiden, bleibt das zugrunde liegende Konzept jedoch dasselbe. Bei der clientseitigen Paginierung wird die Paginierungslogik auf der Clientseite im Browser des Benutzers verwaltet.

Sie können die clientseitige Paginierung mithilfe verschiedener Techniken implementieren. Zu diesen Techniken gehören:

1. Seitenbasierte Paginierung: Bei dieser Methode werden die Daten in Blöcke oder Seiten mit fester Größe unterteilt, wobei normalerweise eine bestimmte Anzahl von Elementen pro Seite angezeigt wird. Benutzer können mithilfe von Navigationslinks oder Schaltflächen, die mit Seitenzahlen oder den Schaltflächen „Zurück“ und „Weiter“ gekennzeichnet sind, durch die Seiten navigieren. Dies ist eine beliebte Implementierung bei Suchmaschinen und E-Commerce-Anwendungen.
2. Unendliches Scrollen: Bei dieser Methode werden neue Daten dynamisch geladen und gerendert, während der Benutzer auf der Seite nach unten scrollt, wodurch ein nahtloses und kontinuierliches Surferlebnis entsteht. Diese Technik ist besonders nützlich, wenn es um große Datenmengen geht, die ständig wachsen, wie etwa Social-Media-Feeds.

Implementieren einer seitenbasierten Paginierung mithilfe von React Hooks

Erstellen Sie zunächst ein React-Projekt. Sie können entweder die verwenden Erstellen Sie mit dem JavaScript-Befehl „create-react-app“ eine einfache React-Appvor Ort bzw Nutzen Sie Vite als Gerüst für ein React-Projekt auf Ihrer Maschine.

In diesem Tutorial wurde Vite verwendet. Den Code dieses Projekts finden Sie hier GitHub-Repository.

Nachdem Sie Ihr React-Projekt eingerichtet haben, fahren wir mit der Implementierung der seitenbasierten Paginierung fort mit React Hooks.

Konfigurieren des Datensatzes

Im Idealfall würden Sie Daten normalerweise aus einer Datenbank abrufen und anzeigen. Für dieses Tutorial rufen Sie jedoch Daten von einem Dummy ab JSONPlaceholder-API stattdessen.

Im src Verzeichnis, erstellen Sie ein neues Komponenten/Paginierung Datei und fügen Sie den folgenden Code hinzu.

1. Erstellen Sie eine React-Funktionskomponente und definieren Sie die folgenden Zustände.

   importieren Reagieren, { useEffect, useState } aus"reagieren";
   importieren"./style.component.css";
   FunktionSeitennummerierung() {
   const [data, setData] = useState([]);
   const [currentPage, setcurrentPage] = useState(1);
   const [itemsPerPage, setitemsPerPage] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   zurückkehren (
    <>
   
    Paginierungskomponente</h1> 
   >
   
    </>
    );
   }
   ExportStandard Seitennummerierung;

2. Implementieren Sie die Logik zum Abrufen von Daten von der Dummy-API. Im Inneren Seitennummerierung Komponente hinzufügen, fügen Sie Folgendes hinzu.

    useEffect(() => {
    bringen(" https://jsonplaceholder.typicode.com/todos")
    .Dann((Antwort) => Antwort.json())
    .Dann((json) => setData (json));
    }, []);
   const displayData = (Daten) => {
   zurückkehren (
   
   
    {Datenlänge > 0 &&
    data.map((Todo, Index) => {
   zurückkehren<liTaste={Index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Der obige Code dient zwei Hauptzwecken. Sobald die Komponente montiert ist, erfolgt zunächst die useEffect Hook löst aus, Daten vom externen API-Endpunkt abzurufen, die dann in das JSON-Format konvertiert werden. Die resultierenden JSON-Daten werden dann zum Aktualisieren verwendet Daten Statusvariable mit den abgerufenen Aufgabendaten. Zweitens, die Anzeigedaten Die Funktion nimmt die abgerufenen Daten als Argument und stellt die Daten als ungeordnete Liste von Aufgaben dar.
3. Im Rücklaufsegment der Seitennummerierung Komponente, einschließlich der Anzeigedaten Funktion zum Rendern der abgerufenen Daten im Browser. Hier ist eine aktualisierte Version des Codes:

   zurückkehren (
    <>
    Paginierungskomponente</h1> 
   >
    {displayData (Daten)}
    </>
   );
   

   Per Anruf displayData (Daten) innerhalb des JSX-Elements und Übergabe der Daten Wenn Sie die Statusvariable als Parameter angeben, stellt die Funktion die abgerufenen Daten dann als ungeordnete Liste im Browser dar.

In diesem speziellen Fall besteht die gerenderte Liste aus zweihundert Aufgaben. In realen Szenarien werden Anwendungen jedoch große Datenmengen verwalten. Die Anzeige all dieser Daten auf einer einzigen Webseite kann zu Leistungsproblemen wie langsamen Ladezeiten und einer insgesamt schlechten Anwendungsleistung führen.

Um dieses Problem zu lösen, wäre es sinnvoll, eine Paginierungsfunktion zu integrieren, um sicherzustellen, dass jede Seite eine begrenzte Anzahl von Elementen enthält, auf die Benutzer über die Navigationsschaltflächen separat zugreifen können.

Dieser Ansatz ermöglicht Benutzern eine übersichtlichere und organisiertere Navigation durch die Daten und verbessert so die Gesamtleistung und Benutzererfahrung der Anwendung.

Implementierung einer Paginierungslogik zur Anzeige einer begrenzten Anzahl von Elementen pro Seite

Um zu bestimmen, welche Aufgaben auf jeder Seite gerendert werden, müssen wir die erforderliche Logik implementieren. Bevor Sie fortfahren, ist es jedoch wichtig, die Gesamtzahl der benötigten Seiten anhand der verfügbaren Aufgaben zu ermitteln.

Um dies zu erreichen, können Sie den folgenden Code hinzufügen Seitennummerierung Komponente:

const Seiten = [];
für (lassen ich = 1; ich <= Mathematik.ceil (data.length / itemsPerPage); i++) {
 seiten.push (i);
 }

Das obige Code-Snippet durchläuft die Daten Array, das die Gesamtzahl der benötigten Seiten berechnet, indem es die Länge dividiert Daten Array nach der gewünschten Anzahl von Elementen pro Seite – die anfängliche Anzahl von Elementen pro Seite ist im festgelegt Objekte pro Seite Zustand.

Sie können diese Zahl jedoch nach Bedarf aktualisieren, um die Logik zu testen. Zuletzt wird jede Seitenzahl hinzugefügt Seiten Array. Jetzt implementieren wir die Logik für die Anzeige einer Anzahl von Elementen pro Seite.

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

Dieser Code bestimmt die Aufgaben, die auf der Browserseite gerendert werden sollen aktuelle Seite Und Objekte pro Seite Variablen – es extrahiert die entsprechenden Indizes für den Aufgabensatz aus dem Datenarray mithilfe der Slice-Methode. Die Indizes werden dann verwendet, um die spezifischen Aufgaben abzurufen, die zur gewünschten Seite gehören.

Um nun die Aufgaben anzuzeigen, aktualisieren Sie die Anzeigedaten Funktion durch Übergabe der pageItems als Parameter. Hier ist eine aktualisierte Version des Codes:

zurückkehren (
 <>
 Paginierungskomponente</h1> 
>
 {displayData (pageItems)}
 </>
);

Durch dieses Update wird die Anzeigedaten Die Funktion stellt eine begrenzte Anzahl von Aufgabenelementen entsprechend der aktuellen Seite dar.

Optimieren Sie den Seitenzugriff und die Navigation mit Navigationsschaltflächen

Um sicherzustellen, dass Benutzer problemlos auf verschiedenen Seiten navigieren und auf Inhalte zugreifen können, müssen Sie Schaltflächen „Zurück“ und „Weiter“ sowie Schaltflächen hinzufügen, die die spezifischen Seitenzahlen angeben.

Lassen Sie uns zunächst die Logik für die Seitenzahlschaltflächen implementieren. Im Seitennummerierung Komponente hinzufügen, fügen Sie den folgenden Code hinzu.

const handleClick = (Fall) => {
 setcurrentPage(Nummer(event.target.id));
 };
const renderPageNumbers = seiten.map((Nummer) => {
Wenn (Zahl < maxPageNumberLimit +1 && Zahl > minPageNumberLimit) {
zurückkehren (
 key={Nummer}
 id={Nummer}
 onClick={handleClick}
 className={currentPage == Nummer? "aktiv": Null}
 >
 {Nummer}
 </li>
 );
 } anders {
zurückkehrenNull;
 }
 });

Der handleClick Die Funktion wird ausgelöst, wenn ein Benutzer auf eine Seitenzahlschaltfläche klickt. Diese Aktion aktualisiert dann die aktuelle Seite Zustandsvariable mit der ausgewählten Seitennummer.

Der renderPageNumbers Variable nutzt die Karte Methode zum Durchlaufen der Seiten Array und generiert dynamisch Listenelemente, die jede Seitenzahl darstellen. Es wendet bedingte Logik an, um basierend auf den definierten maximalen und minimalen Seitenzahlgrenzen zu bestimmen, welche Seitenzahlen gerendert werden sollen.

Fügen Sie abschließend den Code für die Schaltflächen „Weiter“ und „Zurück“ hinzu.

const handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
Wenn (aktuelle Seite + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
Wenn ((aktuelle Seite - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Um die Navigationsschaltflächen darzustellen, aktualisieren Sie die JSX-Elemente wie folgt:

zurückkehren (
 <>
 Paginierungskomponente</h1> 
>
 {displayData (pageItems)}
"Seitenzahlen">




 onClick={handlePrevbtn}
 deaktiviert={aktuelleSeite == Seiten[0]? WAHR: FALSCH}
 > Zurück
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 deaktiviert={aktuelleSeite == Seiten[Seiten.Länge - 1]? WAHR: FALSCH}
 > Weiter
 </button>
 </li>
 </ul>
 </>
 );

Sobald die Komponente gerendert ist, werden die Seitenzahlen, die Schaltflächen „Zurück“ und „Weiter“ sowie die entsprechenden Datenelemente für die aktuelle Seite angezeigt.

Wählen Sie zwischen Paginierungsbibliotheken und benutzerdefinierten Paginierungssystemen

Bei der Entscheidung zwischen der Verwendung von Paginierungsbibliotheken oder dem Aufbau eines benutzerdefinierten Paginierungssystems hängt die Wahl von verschiedenen Faktoren ab. Paginierungsbibliotheken wie React-Paginate bieten vorgefertigte Komponenten und Funktionen, die eine schnelle und unkomplizierte Implementierung ermöglichen.

Andererseits bietet der Aufbau eines benutzerdefinierten Paginierungssystems mithilfe von React-Hooks mehr Flexibilität und Kontrolle über die Paginierungslogik und die Benutzeroberfläche. Die Entscheidung hängt letztendlich von Ihren spezifischen Bedürfnissen und Vorlieben ab.