I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.

Ti sei mai imbattuto in un sito Web o in un'app che carica e visualizza più contenuti mentre scorri? Questo è ciò che chiamiamo un rotolo infinito.

Lo scorrimento infinito è una tecnica popolare che riduce il numero di caricamenti di pagina. Può anche rendere l'esperienza utente più fluida, in particolare sui dispositivi mobili.

Esistono diversi modi per implementare lo scorrimento infinito in React.js. Un modo è utilizzare una libreria come react-infinite-scroll-component. Questa libreria fornisce un componente che attiverà un evento quando l'utente scorre fino alla fine della pagina. È quindi possibile utilizzare questo evento per caricare più contenuti.

Un altro modo per implementare lo scorrimento infinito è utilizzare le funzioni integrate fornite da React. Una di queste funzioni è "componentDidMount" che React chiama quando un componente viene montato per la prima volta.

instagram viewer

È possibile utilizzare questa funzione per caricare il primo batch di dati e quindi utilizzare la funzione "componentDidUpdate" per caricare più dati quando l'utente scorre verso il basso. Puoi anche usa i ganci React per aggiungere una funzione di scorrimento infinito.

Per usare react-infinite-scroll-component, devi prima installarlo usando npm:

npm installare reagire-infinito-scorrere-componente --salva

Quindi, puoi importarlo nel tuo componente React.

importare Reagire da 'reagire'
importare Scroll infinito da 'componente-scorrimento-infinito-reagisci'
classeAppestendeReagire.Componente{
costruttore() {
super()
Questo.stato = {
elementi: [],
 ha di più: VERO
 }
 }


componentDidMount() {
Questo.fetchDati(1)
 }


fetchData = (pagina) => {
cost nuoviElementi = []


per (permettere io = 0; io < 100; i++) {
nuovi oggetti.spingere(io )
 }


se (pagina 100) {
Questo.setStato({ ha di più: falso })
 }


Questo.setStato({ elementi: [...this.state.items, ...newItems] })
 }


rendere() {
ritorno (
<div>
<h1>Scroll infinito</h1>
<Scroll infinito
 lunghezza dati={Questo.state.items.length}
 successivo={Questo.fetchData}
 haAltro={Questo.state.hasMore}
 caricatore={<h4>Caricamento...</h4>}
 endMessage={
<stile p={{ textAlign: 'centro' }}>
<B>Sìì! Hai visto tutto</B>
</P>
 }
>
 {Questo.state.items.map((elemento, indice) => (
<chiave div={indice}>
 {articolo}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
esportarepredefinito App

Questo codice inizia importando React e il componente InfiniteScroll dalla libreria react-infinite-scroll-component. Quindi crea un componente stateful e inizializza lo stato con un vuoto elementi matrice e a ha di più flag impostato su vero.

Nel metodo del ciclo di vita componentDidMount, chiami il metodo fetchData metodo con A pagina parametro di 1. Il metodo fetchData effettua una chiamata API per ottenere alcuni dati. Questo esempio genera solo alcuni dati fittizi. Quindi crea un array di 100 elementi.

Se il parametro della pagina è 100, non ci sono più elementi, quindi imposta il flag hasMore su false. Ciò impedirà al componente InfiniteScroll di effettuare ulteriori chiamate API. Infine, imposta lo stato utilizzando i nuovi dati.

Il metodo render utilizza il componente InfiniteScroll e passa alcuni oggetti di scena. Il prop dataLength è impostato sulla lunghezza dell'array di elementi. L'elica successiva è impostata sul metodo fetchData. L'elica hasMore è impostata sul flag hasMore. L'elica del caricatore fa sì che il componente visualizzi il suo contenuto come indicatore di caricamento. Allo stesso modo, renderà il prop endMessage come un messaggio quando tutti i dati hanno terminato il caricamento.

Ci sono anche altri oggetti di scena che puoi passare al componente InfiniteScroll, ma questi sono quelli che userai più spesso.

Utilizzo delle funzioni integrate

React ha anche alcuni metodi integrati che puoi utilizzare per implementare lo scorrimento infinito.

Il primo metodo è componentDidUpdate. React chiama questo metodo dopo aver aggiornato un componente. È possibile utilizzare questo metodo per verificare se l'utente ha fatto scorrere fino alla fine della pagina e, in tal caso, caricare più dati.

Il secondo metodo è scorrere, che React chiama quando l'utente scorre. È possibile utilizzare questo metodo per tenere traccia della posizione di scorrimento. Se l'utente ha fatto scorrere fino alla fine della pagina, è quindi possibile caricare più dati.

Ecco un esempio di come potresti utilizzare questi metodi per implementare lo scorrimento infinito:

importare Reagisci, {useState, useEffect} da 'reagire'
funzioneApp() {
cost [items, setItems] = useState([])
cost [hasMore, setHasMore] = useState(VERO)
cost [pagina, setPagina] = useState(1)


usaEffetto(() => {
 fetchData (pagina)
 }, [pagina])


cost fetchData = (pagina) => {
cost nuoviElementi = []


per (permettere io = 0; io < 100; i++) {
nuovi oggetti.spingere(io)
 }


se (pagina 100) {
 setHasMore(falso)
 }


setItems([...item, ...newItems])
 }


cost a scorrimento = () => {
cost scrollTop = documento.documentElement.scrollTop
cost scrollAltezza = documento.documentElement.scrollHeight
cost clientHeight = documento.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollAltezza) {
 setPage (pagina + 1)
 }
 }


usaEffetto(() => {
 window.addEventListener('scorrere', a scorrimento)
 ritorno () => window.removeEventListener('scorrere', a scorrimento)
 }, [elementi])


ritorno (
<div>
 {items.map((elemento, indice) => (
<chiave div={indice}>
 {articolo}
</div>
 ))}
</div>
 )
}
esportarepredefinito App

Questo codice utilizza gli hook useState e useEffect per gestire lo stato e gli effetti collaterali.

Nell'hook useEffect, chiama il metodo fetchData con la pagina corrente. Il metodo fetchData effettua una chiamata API per ottenere alcuni dati. In questo esempio, stai solo generando alcuni dati fittizi per dimostrare la tecnica.

Il ciclo for popola l'array newItems con 100 numeri interi. Se il parametro della pagina è 100, imposta il flag hasMore su false. Ciò impedirà al componente InfiniteScroll di effettuare ulteriori chiamate API. Infine, imposta lo stato con i nuovi dati.

Il metodo onScroll tiene traccia della posizione di scorrimento. Se l'utente ha fatto scorrere fino alla fine della pagina, puoi caricare più dati.

L'hook useEffect aggiunge un listener di eventi per l'evento scroll. Quando l'evento scroll si attiva, chiama il metodo onScroll.

Ci sono pro e contro nell'usare lo scorrimento infinito. Può aiutare a migliorare l'interfaccia utente, rendendo l'esperienza più fluida, soprattutto sui dispositivi mobili. Tuttavia, può anche portare gli utenti a perdere il contenuto in quanto potrebbero non scorrere abbastanza verso il basso per vederlo.

È importante soppesare i pro e i contro della tecnica dello scorrimento infinito prima di implementarlo sul tuo sito web o app.

L'aggiunta di scorrimento infinito al tuo sito Web o app React.js può aiutare a migliorare l'esperienza dell'utente. Con lo scorrimento infinito, gli utenti non devono fare clic per vedere più contenuti. L'uso di Infinite Scroll nella tua app React.js può anche aiutare a ridurre il numero di caricamenti di pagina, il che può migliorare le prestazioni.

Puoi anche distribuire facilmente la tua app React su pagine Github gratuitamente.