So fügen Sie Infinite Scroll in React.js hinzu

Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Sind Sie jemals auf eine Website oder App gestoßen, die beim Scrollen mehr Inhalte lädt und anzeigt? Dies nennen wir eine unendliche Schriftrolle.

Unendliches Scrollen ist eine beliebte Technik, die die Anzahl der Seitenladevorgänge reduziert. Es kann auch für eine reibungslosere Benutzererfahrung sorgen, insbesondere auf Mobilgeräten.

Es gibt verschiedene Möglichkeiten, wie Sie unendliches Scrollen in React.js implementieren können. Eine Möglichkeit besteht darin, eine Bibliothek wie „react-infinite-scroll-component“ zu verwenden. Diese Bibliothek stellt eine Komponente bereit, die ein Ereignis auslöst, wenn der Benutzer zum Ende der Seite scrollt. Sie können dieses Ereignis dann verwenden, um weitere Inhalte zu laden.

Eine andere Möglichkeit, unendliches Scrollen zu implementieren, besteht darin, die integrierten Funktionen von React zu verwenden. Eine solche Funktion ist „componentDidMount“, die React aufruft, wenn eine Komponente zum ersten Mal gemountet wird.

Sie können diese Funktion verwenden, um den ersten Datenstapel zu laden, und dann die Funktion „componentDidUpdate“ verwenden, um weitere Daten zu laden, wenn der Benutzer nach unten scrollt. Du kannst auch Verwenden Sie React-Hooks um eine unendliche Bildlauffunktion hinzuzufügen.

Um „react-infinite-scroll-component“ zu verwenden, müssen Sie es zuerst mit npm installieren:

npm Installieren reagieren-unendlich-scrollen-Komponente --speichern

Anschließend können Sie es in Ihre React-Komponente importieren.

importieren Reagieren aus 'reagieren'
importieren InfiniteScroll aus 'react-infinite-scroll-component'
KlasseApperweitertReagieren.Komponente{
Konstrukteur() {
super()
Das.Zustand = {
Artikel: [],
 hat mehr: WAHR
 }
 }
KomponenteDidMount() {
Das.Daten abrufen(1)
 }
fetchData = (Seite) => {
konst neueArtikel = []
für (lassen ich = 0; ich < 100; i++) {
neue Dinge.drücken(ich )
 }
wenn (Seite 100) {
Das.setState({ hat mehr: FALSCH })
 }
Das.setState({ Artikel: [...dieser.Zustand.Elemente, ...neueElemente] })
 }
rendern() {
zurückkehren (
<div>
<h1>Unendliche Schriftrolle</h1>
<InfiniteScroll
 Datenlänge={Das.state.items.länge}
 weiter={Das.Daten abrufen}
 hasMore={Das.state.hasMore}
 Lader={<h4>Wird geladen...</h4>}
 endMessage={
<p style={{ textAlign: 'Center' }}>
<B>Yay! Sie haben alles gesehen</B>
</P>
 }
>
 {Das.state.items.map((Element, Index) => (
<div key={index}>
 {Artikel}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
ExportStandard App

Dieser Code beginnt mit dem Import von React und der InfiniteScroll-Komponente aus der React-Infinite-Scroll-Component-Bibliothek. Anschließend erstellt es eine zustandsbehaftete Komponente und initialisiert den Zustand mit einem Leerzeichen Artikel Array und a hat mehr Flag auf wahr gesetzt.

In der Lebenszyklusmethode „componentDidMount“ rufen Sie die Daten abrufen Methode mit a Buchseite Parameter von 1. Die fetchData-Methode führt einen API-Aufruf durch, um einige Daten abzurufen. Dieses Beispiel generiert nur einige Dummy-Daten. Es erstellt dann ein Array von 100 Elementen.

Wenn der Seitenparameter 100 ist, gibt es keine weiteren Elemente, also setzen Sie das hasMore-Flag auf false. Dadurch wird verhindert, dass die InfiniteScroll-Komponente weitere API-Aufrufe durchführt. Stellen Sie schließlich den Zustand mit den neuen Daten ein.

Die Rendermethode verwendet die InfiniteScroll-Komponente und übergibt einige Requisiten. Die Eigenschaft dataLength wird auf die Länge des Arrays items gesetzt. Die nächste Eigenschaft wird auf die Methode fetchData gesetzt. Die hasMore-Prop wird auf das hasMore-Flag gesetzt. Die Loader-Prop bewirkt, dass die Komponente ihren Inhalt als Ladeindikator rendert. Ebenso wird die EndMessage-Prop als Nachricht gerendert, wenn alle Daten vollständig geladen sind.

Es gibt auch andere Requisiten, die Sie an die InfiniteScroll-Komponente übergeben können, aber diese werden Sie am häufigsten verwenden.

Verwenden von integrierten Funktionen

React verfügt auch über einige integrierte Methoden, mit denen Sie unendliches Scrollen implementieren können.

Die erste Methode ist KomponenteDidUpdate. React ruft diese Methode auf, nachdem eine Komponente aktualisiert wurde. Mit dieser Methode können Sie überprüfen, ob der Benutzer bis zum Ende der Seite gescrollt hat, und gegebenenfalls weitere Daten laden.

Die zweite Methode ist scrollen, die React aufruft, wenn der Benutzer scrollt. Sie können diese Methode verwenden, um die Bildlaufposition zu verfolgen. Wenn der Benutzer zum Ende der Seite gescrollt hat, können Sie dann weitere Daten laden.

Hier ist ein Beispiel dafür, wie Sie diese Methoden verwenden können, um unendliches Scrollen zu implementieren:

importieren Reagieren, {useState, useEffect} aus 'reagieren'
FunktionApp() {
konst [Elemente, setItems] = useState([])
konst [hasMore, setHasMore] = useState(WAHR)
konst [Seite, setPage] = useState(1)
useEffect(() => {
 fetchData (Seite)
 }, [Buchseite])
konst fetchData = (Seite) => {
konst neueArtikel = []
für (lassen ich = 0; ich < 100; i++) {
neue Dinge.drücken(ich)
 }
wenn (Seite 100) {
 setHasMore(FALSCH)
 }
setItems([...Artikel, ...neueArtikel])
 }
konst onScroll = () => {
konst scrollTop = dokumentieren.documentElement.scrollTop
konst scrollHöhe = dokumentieren.documentElement.scrollHeight
konst Kundenhöhe = dokumentieren.documentElement.clientHeight
if (scrollTop + clientHeight >= Bildlaufhöhe) {
 setPage (Seite + 1)
 }
 }
useEffect(() => {
 window.addEventListener('scrollen', onScroll)
 Rückgabe () => window.removeEventListener('scrollen', onScroll)
 }, [Artikel])
zurückkehren (
<div>
 {Elemente.map((Element, Index) => (
<div key={index}>
 {Artikel}
</div>
 ))}
</div>
 )
}
ExportStandard App

Dieser Code verwendet die useState- und useEffect-Hooks, um Status und Nebeneffekte zu verwalten.

Im Hook useEffect ruft es die Methode fetchData mit der aktuellen Seite auf. Die fetchData-Methode führt einen API-Aufruf durch, um einige Daten abzurufen. In diesem Beispiel generieren Sie nur einige Dummy-Daten, um die Technik zu demonstrieren.

Die for-Schleife füllt das newItems-Array mit 100 Ganzzahlen. Wenn der Seitenparameter 100 ist, setzen Sie das hasMore-Flag auf false. Dadurch wird verhindert, dass die InfiniteScroll-Komponente weitere API-Aufrufe durchführt. Stellen Sie abschließend den Zustand mit den neuen Daten ein.

Die Methode onScroll verfolgt die Bildlaufposition. Wenn der Benutzer zum Ende der Seite gescrollt hat, können Sie weitere Daten laden.

Der Hook useEffect fügt einen Ereignis-Listener für das Scroll-Ereignis hinzu. Wenn das scroll-Ereignis ausgelöst wird, ruft es die onScroll-Methode auf.

Es gibt Vor- und Nachteile bei der Verwendung von unendlichem Scrollen. Es kann helfen, die Benutzeroberfläche zu verbessern und für ein reibungsloseres Erlebnis zu sorgen, insbesondere auf Mobilgeräten. Es kann jedoch auch dazu führen, dass Benutzer Inhalte verpassen, da sie möglicherweise nicht weit genug nach unten scrollen, um sie zu sehen.

Es ist wichtig, die Vor- und Nachteile abzuwägen der unendlichen Scroll-Technik bevor Sie es auf Ihrer Website oder App implementieren.

Das Hinzufügen von unendlichem Scrollen zu Ihrer React.js-Website oder -App kann dazu beitragen, die Benutzererfahrung zu verbessern. Mit unendlichem Scrollen müssen Benutzer nicht klicken, um mehr Inhalte zu sehen. Die Verwendung von Infinite Scroll in Ihrer React.js-App kann auch dazu beitragen, die Anzahl der Seitenladevorgänge zu reduzieren, was die Leistung verbessern kann.

Sie können Ihre React-App auch einfach kostenlos auf Github-Seiten bereitstellen.