Cum să adăugați derulare infinit în React.js

Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Ați întâlnit vreodată un site web sau o aplicație care încarcă și afișează mai mult conținut pe măsură ce derulați? Acesta este ceea ce numim un sul infinit.

Derularea infinită este o tehnică populară care reduce numărul de încărcări ale paginilor. De asemenea, poate oferi o experiență mai fluidă pentru utilizator, în special pe dispozitivele mobile.

Există câteva moduri diferite prin care puteți implementa derularea infinită în React.js. O modalitate este de a folosi o bibliotecă precum react-infinite-scroll-component. Această bibliotecă oferă o componentă care va declanșa un eveniment atunci când utilizatorul derulează în partea de jos a paginii. Apoi puteți folosi acest eveniment pentru a încărca mai mult conținut.

O altă modalitate de a implementa derularea infinită este să utilizați funcțiile încorporate pe care le oferă React. O astfel de funcție este „componentDidMount”, pe care React o apelează atunci când o componentă este montată pentru prima dată.

Puteți folosi această funcție pentru a încărca primul lot de date și apoi utilizați funcția „componentDidUpdate” pentru a încărca mai multe date atunci când utilizatorul derulează în jos. Poti de asemenea utilizați cârlige React pentru a adăuga o funcție de defilare infinită.

Pentru a utiliza react-infinite-scroll-component, trebuie să o instalați mai întâi folosind npm:

npm instalare reacționează-infinit-sul-componentă --Salvați

Apoi, îl puteți importa în componenta React.

import Reacţiona din 'reacţiona'
import Derulare infinită din „componenta-defilare-reacție-infinită”
clasăAppse extindeReacţiona.Componentă{
constructor() {
super()
acest.state = {
articole: [],
 are mai mult: Adevărat
 }
 }
componentDidMount() {
acest.fetchData(1)
 }
fetchData = (pagina) => {
const articole noi = []
pentru (lăsa i = 0; eu < 100; i++) {
articole noi.Apăsaţi(i )
 }
if (pagina 100) {
acest.setState({ are mai mult: fals })
 }
acest.setState({ articole: [...this.state.items, ...newItems] })
 }
randa() {
întoarcere (
<div>
<h1>Derulare infinită</h1>
<Derulare infinită
 dataLength={acest.state.items.length}
 următorul={acest.fetchData}
 areMore={acest.state.hasMore}
 încărcător={<h4>Se încarcă...</h4>}
 endMessage={
<p stil={{ textAlign: 'centru' }}>
<b>Yay! Ai văzut totul</b>
</p>
 }
>
 {acest.state.items.map((articol, index) => (
<cheie div={index}>
 {articol}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exportMod implicit App

Acest cod începe prin a importa React și componenta InfiniteScroll din biblioteca react-infinite-scroll-component. Apoi creează o componentă cu stare și inițializează starea cu un gol articole matrice și a are mai mult steag setat la adevărat.

În metoda ciclului de viață componentDidMount, apelați fetchData metoda cu a pagină parametrul de 1. Metoda fetchData efectuează un apel API pentru a obține unele date. Acest exemplu generează doar câteva date fictive. Apoi creează o matrice de 100 de articole.

Dacă parametrul de pagină este 100, nu mai există elemente, așa că setați indicatorul hasMore la false. Acest lucru va opri componenta InfiniteScroll să mai efectueze apeluri API. În cele din urmă, setați starea folosind noile date.

Metoda de randare folosește componenta InfiniteScroll și trece în unele elemente de recuzită. Propul dataLength este setat la lungimea matricei de articole. Următorul prop este setat la metoda fetchData. Propul hasMore este setat la steagul hasMore. Elementul de sprijin de încărcare face ca componenta să își redeze conținutul ca indicator de încărcare. De asemenea, va reda prop-ul endMessage ca mesaj când toate datele s-au terminat de încărcat.

Există și alte elemente de recuzită pe care le puteți trece la componenta InfiniteScroll, dar acestea sunt cele pe care le veți folosi cel mai des.

Utilizarea funcțiilor încorporate

React are, de asemenea, câteva metode încorporate pe care le puteți folosi pentru a implementa derularea infinită.

Prima metodă este componentDidUpdate. React apelează această metodă după ce a actualizat o componentă. Puteți folosi această metodă pentru a verifica dacă utilizatorul a derulat până în partea de jos a paginii și, dacă da, pentru a încărca mai multe date.

A doua metodă este sul, pe care React îl apelează atunci când utilizatorul derulează. Puteți folosi această metodă pentru a urmări poziția defilării. Dacă utilizatorul a derulat în partea de jos a paginii, puteți încărca mai multe date.

Iată un exemplu despre cum puteți folosi aceste metode pentru a implementa derularea infinită:

import Reacționează, {useState, useEffect} din 'reacţiona'
funcţieApp() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(Adevărat)
const [pagina, setPage] = useState(1)
useEffect(() => {
 fetchData (pagina)
 }, [pagină])
const fetchData = (pagina) => {
const articole noi = []
pentru (lăsa i = 0; eu < 100; i++) {
articole noi.Apăsaţi(i)
 }
if (pagina 100) {
 setHasMore(fals)
 }
setItems([...articole, ...articole noi])
 }
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
dacă (scrollTop + clientHeight >= scrollHeight) {
 setPage (pagina + 1)
 }
 }
useEffect(() => {
 window.addEventListener('sul', onScroll)
 return () => window.removeEventListener('sul', onScroll)
 }, [articole])
întoarcere (
<div>
 {items.map((articol, index) => (
<cheie div={index}>
 {articol}
</div>
 ))}
</div>
 )
}
exportMod implicit App

Acest cod folosește cârligele useState și useEffect pentru a gestiona starea și efectele secundare.

În cârligul useEffect, apelează metoda fetchData cu pagina curentă. Metoda fetchData efectuează un apel API pentru a obține unele date. În acest exemplu, doar generați niște date fictive pentru a demonstra tehnica.

Bucla for populează tabloul newItems cu 100 de numere întregi. Dacă parametrul de pagină este 100, setați indicatorul hasMore la false. Acest lucru va opri componenta InfiniteScroll să mai efectueze apeluri API. În cele din urmă, setați starea cu noile date.

Metoda onScroll ține evidența poziției derulării. Dacă utilizatorul a derulat în partea de jos a paginii, puteți încărca mai multe date.

Cârligul useEffect adaugă un ascultător de evenimente pentru evenimentul de defilare. Când se declanșează evenimentul de defilare, apelează metoda onScroll.

Există avantaje și dezavantaje în utilizarea derulării infinite. Poate ajuta la îmbunătățirea interfeței cu utilizatorul, oferind o experiență mai fluidă, în special pe dispozitivele mobile. Cu toate acestea, poate duce, de asemenea, la lipsa conținutului utilizatorilor, deoarece este posibil să nu deruleze suficient de departe pentru a-l vedea.

Este important să cântăriți argumentele pro și contra a tehnicii scroll infinit înainte de a-l implementa pe site-ul sau aplicația dvs.

Adăugarea derulării infinite pe site-ul sau aplicația dvs. React.js poate ajuta la îmbunătățirea experienței utilizatorului. Cu derularea infinită, utilizatorii nu trebuie să facă clic pentru a vedea mai mult conținut. Utilizarea Infinite Scroll în aplicația React.js poate ajuta, de asemenea, la reducerea numărului de încărcări ale paginilor, ceea ce poate îmbunătăți performanța.

De asemenea, puteți implementa cu ușurință aplicația React în paginile Github, gratuit.