Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.

Avez-vous déjà rencontré un site Web ou une application qui charge et affiche plus de contenu lorsque vous faites défiler? C'est ce que nous appelons un défilement infini.

Le défilement infini est une technique populaire qui réduit le nombre de chargements de pages. Cela peut également rendre l'expérience utilisateur plus fluide, en particulier sur les appareils mobiles.

Il existe plusieurs façons d'implémenter le défilement infini dans React.js. Une façon consiste à utiliser une bibliothèque comme react-infinite-scroll-component. Cette bibliothèque fournit un composant qui déclenchera un événement lorsque l'utilisateur défilera vers le bas de la page. Vous pouvez ensuite utiliser cet événement pour charger plus de contenu.

Une autre façon d'implémenter le défilement infini consiste à utiliser les fonctions intégrées fournies par React. L'une de ces fonctions est "componentDidMount" que React appelle lorsqu'un composant est monté pour la première fois.

instagram viewer

Vous pouvez utiliser cette fonction pour charger le premier lot de données, puis utiliser la fonction "componentDidUpdate" pour charger plus de données lorsque l'utilisateur fait défiler vers le bas. Vous pouvez aussi utiliser les crochets React pour ajouter une fonction de défilement infini.

Pour utiliser react-infinite-scroll-component, vous devez d'abord l'installer en utilisant npm :

npm installer réagir-infini-faire défiler-composant --sauvegarder

Ensuite, vous pouvez l'importer dans votre composant React.

importer Réagir depuis 'réagir'
importer DEFILEMENT infini depuis 'react-infinite-scroll-composant'
classeApplications'étendRéagir.Composant{
constructeur() {
super()
ce.état = {
articles: [],
 a plus: vrai
 }
 }


componentDidMount() {
ce.fetchData(1)
 }


récupérer les données = (page) => {
constante nouveauxéléments = []


pour (laisser je = 0; je < 100; je++) {
nouveaux articles.pousser(je )
 }


si (page 100) {
ce.setState({ a plus: FAUX })
 }


ce.setState({ articles: [...this.state.items, ...newItems] })
 }


rendre() {
retour (
<div>
<h1>DEFILEMENT infini</h1>
<DEFILEMENT infini
 dataLength={ce.state.items.length}
 suivant={ce.fetchData}
 aPlus={ce.state.hasMore}
 chargeur={<h4>Chargement...</h4>}
 finMessage={
<p style={{ textAlign: 'centre' }}>
<b>Yay! Vous avez tout vu</b>
</p>
 }
>
 {ce.state.items.map((item, index) => (
<clé div={index}>
 {article}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exporterdéfaut Application

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 initialise l'état avec un vide articles tableau et un a plus drapeau défini sur vrai.

Dans la méthode de cycle de vie componentDidMount, vous appelez le récupérer les données méthode avec un page paramètre de 1. La méthode fetchData effectue un appel API pour obtenir des données. Cet exemple génère simplement des données factices. Il crée ensuite un tableau de 100 éléments.

Si le paramètre de page est 100, il n'y a plus d'éléments, alors définissez l'indicateur hasMore sur false. Cela empêchera le composant InfiniteScroll d'effectuer d'autres appels d'API. Enfin, définissez l'état à l'aide des nouvelles données.

La méthode de rendu utilise le composant InfiniteScroll et transmet certaines props. La propriété dataLength est définie sur la longueur du tableau d'éléments. Le prop suivant est défini sur la méthode fetchData. La prop hasMore est définie sur le drapeau hasMore. Le loader prop amène le composant à restituer son contenu en tant qu'indicateur de chargement. De même, il affichera le prop endMessage sous la forme d'un message lorsque toutes les données auront fini de se charger.

Il existe également d'autres accessoires que vous pouvez transmettre au composant InfiniteScroll, mais ce sont ceux que vous utiliserez le plus souvent.

Utilisation des fonctions intégrées

React possède également des méthodes intégrées que vous pouvez utiliser pour implémenter un défilement infini.

La première méthode est componentDidUpdate. 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 la page jusqu'en bas et, si c'est le cas, charger plus de données.

La deuxième méthode est faire défiler, que React appelle lorsque l'utilisateur fait défiler. Vous pouvez utiliser cette méthode pour suivre la position de défilement. Si l'utilisateur a fait défiler la page jusqu'en bas, vous pouvez alors charger plus de données.

Voici un exemple de la façon dont vous pourriez utiliser ces méthodes pour implémenter le défilement infini :

importer Réagir, {useState, useEffect} depuis 'réagir'
fonctionApplication() {
constante [articles, setItems] = useState([])
constante [hasMore, setHasMore] = useState(vrai)
constante [page, setPage] = useState(1)


useEffet(() => {
 récupérer les données (page)
 }, [page])


constante récupérer les données = (page) => {
constante nouveauxéléments = []


pour (laisser je = 0; je < 100; je++) {
nouveaux articles.pousser(je)
 }


si (page 100) {
 setHasMore(FAUX)
 }


setItems([...articles, ...nouveauxarticles])
 }


constante onScroll = () => {
constante scrollTop = document.documentElement.scrollTop
constante scrollHeight = document.documentElement.scrollHeight
constante hauteurclient = document.documentElement.clientHeight


si (scrollTop + clientHeight >= hauteur de défilement) {
 setPage (page + 1)
 }
 }


useEffet(() => {
 fenêtre.addEventListener('faire défiler', onScroll)
 retour () => window.removeEventListener('faire défiler', onScroll)
 }, [articles])


retour (
<div>
 {items.map((item, index) => (
<clé div={index}>
 {article}
</div>
 ))}
</div>
 )
}
exporterdéfaut Application

Ce code utilise les crochets useState et useEffect pour gérer l'état et les effets secondaires.

Dans le crochet useEffect, il appelle la méthode fetchData avec la page actuelle. La méthode fetchData effectue un appel API pour obtenir 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, définissez l'indicateur hasMore sur false. Cela empêchera le composant InfiniteScroll 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. Si l'utilisateur a fait défiler la page jusqu'en bas, vous pouvez charger plus de données.

Le crochet useEffect ajoute un écouteur d'événement pour l'événement de défilement. Lorsque l'événement de défilement se déclenche, il appelle la méthode onScroll.

Il y a des avantages et des inconvénients à utiliser le défilement infini. Cela peut aider à améliorer l'interface utilisateur, ce qui rend l'expérience plus fluide, en particulier sur les appareils mobiles. Cependant, cela peut également faire en sorte que les utilisateurs manquent de contenu car ils ne peuvent pas faire défiler suffisamment loin pour le voir.

Il est important de peser le pour et le contre de la technique du défilement infini avant de l'implémenter sur votre site Web ou votre application.

L'ajout d'un défilement infini à votre site Web ou application React.js peut aider à améliorer l'expérience utilisateur. Avec le défilement infini, les utilisateurs n'ont pas à cliquer pour voir plus de contenu. L'utilisation d'Infinite Scroll dans votre application React.js peut également aider à réduire le nombre de chargements de pages, ce qui peut améliorer les performances.

Vous pouvez également déployer facilement votre application React sur les pages Github gratuitement.