Come aggiungere lo scorrimento infinito in React.js
Ti sei mai imbattuto in un sito Web o in un’app che carica e visualizza più contenuti mentre scorri? Questo è ciò che chiamiamo scorrimento infinito.
Lo scorrimento infinito è una tecnica popolare che può semplificare la navigazione di grandi quantità di contenuti. Può anche rendere l’esperienza utente più fluida, soprattutto sui dispositivi mobili.
Puoi implementare lo scorrimento infinito in React in diversi modi. Il primo è utilizzare una libreria come react-infinite-scroll-component. Il componente di questa libreria attiva un evento ogni volta che l’utente scorre fino alla fine della pagina. È quindi possibile utilizzare questo evento come spunto per caricare più contenuti.
Un altro modo per implementare lo scorrimento infinito in React è tramite le sue funzioni integrate. Una di queste funzioni è “componentDidMount”, che React chiama quando monta per la prima volta un componente.
È possibile utilizzare questa funzione per caricare il primo batch di dati, seguita dalla funzione “componentDidUpdate” per caricare i dati successivi mentre l’utente scorre verso il basso.
Puoi anche utilizzare gli hook React per aggiungere una funzionalità di scorrimento infinito.
Esistono alcuni modi per utilizzare il componente react-infinite-scroll.
Sommario:
Installa il componente react-infinite-scroll
Per avviare l’utilizzo, devi prima installarlo tramite npm:
npm install react-infinite-scroll-component --save
Importa il componente react-infinite-scroll in React
Dopo l’installazione, devi importare la libreria di scorrimento infinito nel tuo componente React.
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Questo codice inizia importando React e il componente InfiniteScroll dalla libreria react-infinite-scroll-component. Quindi crea un componente con stato e lo inizializza con un array di elementi vuoto e un flag hasMore impostato su True.
Imposta parametri
Nel metodo del ciclo di vita componenteDidMount, devi chiamare il metodo fetchData con un parametro di pagina impostato su 1. Il metodo fetchData effettua una chiamata API per recuperare i dati. Questo esempio di react-infinite-scroller genera alcuni dati fittizi e crea un array di 100 elementi.
Una volta che il parametro page raggiunge 100, poiché non esistono più elementi, puoi impostare il flag hasMore su False. Ciò impedisce 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. La prop dataLength è impostata sulla lunghezza dell’array di elementi. La seguente prop è impostata sul metodo fetchData. La prop hasMore è impostata uguale al flag hasMore.
La prop del caricatore fa sì che il componente visualizzi il suo contenuto come indicatore di caricamento. Allo stesso modo, renderà la prop endMessage come un messaggio quando tutti i dati avranno terminato il caricamento.
Puoi passare altri oggetti di scena al componente InfiniteScroll, ma questi sono quelli che utilizzerai più spesso.
Utilizzo delle funzioni integrate
React ha anche alcuni metodi integrati che puoi utilizzare per implementare InfiniteScroll.
Il primo metodo è componenteDidUpdate. React chiama questo metodo dopo aver aggiornato un componente. Puoi utilizzare questo metodo per verificare se l’utente ha effettuato lo scorrimento fino alla fine della pagina. Se sì, carica più dati.
Il secondo metodo è lo scorrimento, che React chiama quando l’utente scorre. È possibile utilizzare questo metodo per tenere traccia della posizione di scorrimento. È possibile caricare più dati se l’utente ha scorso fino alla fine della pagina.
Ecco un esempio di scorrimento infinito di React che mostra come utilizzare questi metodi:
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App Questo codice utilizza gli hook useState e useEffect per gestire lo stato e gli effetti collaterali.
All’interno dell’hook useEffect, chiama il metodo fetchData con la pagina corrente. Il metodo fetchData effettua una chiamata API per recuperare i dati. In questo esempio stai semplicemente generando alcuni dati fittizi per dimostrare la tecnica.
Il ciclo for popola l’array newItems con 100 numeri interi. Se il parametro page è 100, imposta il flag hasMore su False. Ciò impedisce al componente di scorrimento infinito di effettuare ulteriori chiamate API.
Infine, imposta lo stato con i nuovi dati.
Il metodo onScroll tiene traccia della posizione di scorrimento. Puoi caricare più dati se l’utente scorre fino alla fine della pagina.
L’hook useEffect aggiunge un ascoltatore di eventi per l’evento scroll. Quando si attiva l’evento scroll, chiama il metodo onScroll.
Ci sono pro e contro nell’usare lo scorrimento infinito di React. Migliora l’interfaccia utente, rendendo l’esperienza più fluida, soprattutto sui dispositivi mobili. Tuttavia, può anche far sì che gli utenti manchino del contenuto poiché potrebbero non scorrere abbastanza verso il basso per vederlo.
È essenziale valutare i pro e i contro della tecnica dello scorrimento infinito prima di implementarla sul tuo sito web o sulla tua app.
L’aggiunta dello scorrimento infinito al tuo sito Web o alla tua app React.js può migliorare l’esperienza dell’utente. Con lo scorrimento infinito, gli utenti non devono fare clic per visualizzare più contenuti. L’utilizzo dello scorrimento infinito nella tua app React.js può ridurre il numero di caricamenti della pagina, migliorando ulteriormente le prestazioni.
Puoi anche distribuire facilmente la tua app React alle pagine Github gratuitamente.
