Avez-vous déjà rencontré un site Web ou une application qui charge et affiche plus de contenu lorsque vous faites défiler l’écran ? C’est ce que nous appelons le défilement infini.
Le défilement infini est une technique populaire qui peut faciliter la navigation dans de grandes quantités de contenu. Cela peut également permettre une expérience utilisateur plus fluide, en particulier sur les appareils mobiles.
Vous pouvez implémenter le défilement infini dans React de différentes manières. La première consiste à utiliser une bibliothèque comme react-infinite-scroll-component. Le composant de cette bibliothèque déclenche un événement chaque fois que l’utilisateur fait défiler vers le bas de la page. Vous pouvez ensuite utiliser cet événement comme signal pour charger plus de contenu.
Une autre façon d’implémenter le défilement infini dans React consiste à utiliser ses fonctions intégrées. L’une de ces fonctions est «componentDidMount», que React appelle lors du premier montage d’un composant.
Vous pouvez utiliser cette fonction pour charger le premier lot de données, suivie de la fonction «componentDidUpdate» pour charger les données suivantes au fur et à mesure que l’utilisateur fait défiler vers le bas.
Vous pouvez également utiliser les hooks React pour ajouter une fonctionnalité de défilement infini.
Il existe plusieurs façons d’utiliser le composant React-Infinite-Scroll.
Table des matières
Installer le composant React-Infinite-Scroll
Pour démarrer l’utilisation, vous devez d’abord l’installer via npm :
npm install react-infinite-scroll-component --save
Importer le composant React-Infinite-Scroll dans React
Après l’installation, vous devez importer la bibliothèque de défilement infini dans votre composant 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
Ce code commence par importer React et le composant InfiniteScroll à partir de la bibliothèque react-infinite-scroll-component. Il crée ensuite un composant avec état et l’initialise avec un tableau d’éléments vide et un indicateur hasMore défini sur True.
Définir les paramètres
Dans la méthode de cycle de vie composantDidMount, vous devez appeler la méthode fetchData avec un paramètre de page défini sur 1. La méthode fetchData effectue un appel API pour récupérer les données. Cet exemple de réaction infinie-scroller génère des données factices et crée un tableau de 100 éléments.
Une fois que le paramètre de page atteint 100, puisqu’il n’existe plus d’éléments, vous pouvez définir l’indicateur hasMore sur False. Cela empêche le composant InfiniteScroll d’effectuer d’autres appels d’API. Enfin, définissez l’état en utilisant les nouvelles données.
La méthode de rendu utilise le composant InfiniteScroll et transmet certains accessoires. La prop dataLength est définie sur la longueur du tableau d’éléments. L’accessoire suivant est défini sur la méthode fetchData. La prop hasMore est définie de manière égale à l’indicateur hasMore.
L’accessoire de chargement amène le composant à restituer son contenu comme indicateur de chargement. De même, il affichera le prop endMessage sous forme de message lorsque toutes les données auront fini de se charger.
Vous pouvez transmettre d’autres accessoires au composant InfiniteScroll, mais ce sont ceux que vous utiliserez le plus souvent.
Utilisation des fonctions intégrées
React dispose également de méthodes intégrées que vous pouvez utiliser pour implémenter InfiniteScroll.
La première méthode est composantDidUpdate. React appelle cette méthode après avoir mis à jour un composant. Vous pouvez utiliser cette méthode pour vérifier si l’utilisateur a fait défiler vers le bas de la page. Si oui, il charge plus de données.
La deuxième méthode est le défilement, que React appelle lorsque l’utilisateur fait défiler. Vous pouvez utiliser cette méthode pour suivre la position de défilement. Vous pouvez charger plus de données si l’utilisateur a fait défiler vers le bas de la page.
Voici un exemple de défilement infini React qui vous montre comment utiliser ces méthodes :
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 Ce code utilise les hooks useState et useEffect pour gérer l’état et les effets secondaires.
Dans le hook useEffect, il appelle la méthode fetchData avec la page actuelle. La méthode fetchData effectue un appel API pour récupérer des données. Dans cet exemple, vous générez simplement des données factices pour démontrer la technique.
La boucle for remplit le tableau newItems avec 100 entiers. Si le paramètre de page est 100, il définit l’indicateur hasMore sur False. Cela empêche le composant de défilement infini d’effectuer d’autres appels d’API.
Enfin, définissez l’état avec les nouvelles données.
La méthode onScroll garde une trace de la position de défilement. Vous pouvez charger plus de données si l’utilisateur fait défiler vers le bas de la page.
Le hook useEffect ajoute un écouteur d’événement pour l’événement scroll. Lorsque l’événement scroll se déclenche, il appelle la méthode onScroll.
Il y a des avantages et des inconvénients à utiliser le défilement infini de React. Il améliore l’interface utilisateur, permettant une expérience plus fluide, en particulier sur les appareils mobiles. Cependant, cela peut également amener les utilisateurs à manquer du contenu, car ils risquent de ne pas faire défiler suffisamment la page pour le voir.
Il est essentiel de peser le pour et le contre de la technique du défilement infini avant de la mettre en œuvre sur votre site Web ou votre application.
L’ajout d’un défilement infini à votre site Web ou à votre application React.js peut améliorer l’expérience utilisateur. Avec le défilement infini, les utilisateurs n’ont pas besoin de cliquer pour voir plus de contenu. L’utilisation d’Infinite Scroll dans votre application React.js peut réduire le nombre de chargements de pages, ce qui améliore encore les performances.
Vous pouvez également facilement déployer gratuitement votre application React sur les pages Github.
