Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Jeste li ikada naišli na web mjesto ili aplikaciju koja učitava i prikazuje više sadržaja dok se pomičete? To je ono što nazivamo beskonačnim svitkom.

Beskonačno pomicanje popularna je tehnika koja smanjuje broj učitavanja stranica. Također može omogućiti glatko korisničko iskustvo, posebno na mobilnim uređajima.

Postoji nekoliko različitih načina na koje možete implementirati beskonačno pomicanje u React.js. Jedan od načina je korištenje biblioteke poput react-infinite-scroll-component. Ova biblioteka pruža komponentu koja će pokrenuti događaj kada se korisnik pomakne na dno stranice. Tada možete koristiti ovaj događaj za učitavanje više sadržaja.

Drugi način za implementaciju beskonačnog pomicanja je korištenje ugrađenih funkcija koje nudi React. Jedna takva funkcija je “componentDidMount” koju React poziva kada se komponenta prvi put montira.

Možete koristiti ovu funkciju za učitavanje prve serije podataka, a zatim koristiti funkciju "componentDidUpdate" za učitavanje više podataka kada se korisnik pomakne prema dolje. Također možete

instagram viewer
koristiti React kuke za dodavanje značajke beskonačnog pomicanja.

Da biste koristili react-infinite-scroll-component, morate je prvo instalirati koristeći npm:

npm instalirati reagirati-beskonačno-svitak-komponenta --uštedjeti

Zatim ga možete uvesti u svoju React komponentu.

uvoz Reagirati iz 'reagirati'
uvoz InfiniteScroll iz 'react-infinite-scroll-component'
razredaaplikacijaproteže seReagirati.komponenta{
konstruktor() {
super()
ovaj.stanje = {
stavke: [],
 ima više: pravi
 }
 }


componentDidMount() {
ovaj.fetchData(1)
 }


fetchData = (stranica) => {
konst nove stavke = []


za (neka ja = 0; ja < 100; i++) {
nove stvari.gurnuti(ja )
 }


if (stranica 100) {
ovaj.setState({ imaViše: lažno })
 }


ovaj.setState({ stavke: [...this.state.items, ...newItems] })
 }


render() {
povratak (
<div>
<h1>Beskonačni svitak</h1>
<InfiniteScroll
 dataLength={ovaj.state.items.length}
 sljedeći={ovaj.fetchData}
 hasMore={ovaj.state.hasMore}
 loader={<h4>Učitavam...</h4>}
 endMessage={
<p style={{ textAlign: 'centar' }}>
<b>Jupi! Sve ste vidjeli</b>
</str>
 }
>
 {ovaj.state.items.map((stavka, indeks) => (
<div ključ={index}>
 {artikal}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
izvozzadano aplikacija

Ovaj kod počinje uvozom Reacta i InfiniteScroll komponente iz react-infinite-scroll-component biblioteke. Zatim stvara komponentu s praćenjem stanja i inicijalizira stanje s praznom stavke niz i a imaViše zastavica postavljena na istinito.

U metodi životnog ciklusa componentDidMount pozivate dohvatiPodatke metoda s a stranica parametar od 1. Metoda fetchData upućuje API poziv za dobivanje podataka. Ovaj primjer samo generira neke lažne podatke. Zatim stvara niz od 100 stavki.

Ako je parametar stranice 100, nema više stavki, pa postavite oznaku hasMore na false. Ovo će zaustaviti komponentu InfiniteScroll od daljnjih API poziva. Na kraju, postavite stanje pomoću novih podataka.

Metoda renderiranja koristi komponentu InfiniteScroll i prosljeđuje neke rekvizite. Podatak dataLength postavljen je na duljinu niza stavki. Sljedeći prop postavljen je na metodu fetchData. Prop hasMore postavljen je na oznaku hasMore. Prop loader uzrokuje da komponenta prikazuje svoj sadržaj kao indikator učitavanja. Isto tako, renderirati će endMessage prop kao poruku kada svi podaci završe s učitavanjem.

Postoje i drugi dodaci koje možete proslijediti komponenti InfiniteScroll, ali ovo su oni koje ćete najčešće koristiti.

Korištenje ugrađenih funkcija

React također ima neke ugrađene metode koje možete koristiti za implementaciju beskonačnog pomicanja.

Prva metoda je komponentaDidUpdate. React poziva ovu metodu nakon ažuriranja komponente. Ovu metodu možete koristiti da provjerite je li se korisnik pomaknuo na dno stranice i, ako jest, učitajte više podataka.

Druga metoda je svitak, koji React poziva kada korisnik skrola. Ovu metodu možete koristiti za praćenje položaja pomicanja. Ako se korisnik pomaknuo do dna stranice, tada možete učitati više podataka.

Evo primjera kako možete koristiti ove metode za implementaciju beskonačnog pomicanja:

uvoz Reagiraj, {useState, useEffect} iz 'reagirati'
funkcijaaplikacija() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(pravi)
konst [stranica, setPage] = useState(1)


useEffect(() => {
 dohvaćanje podataka (stranica)
 }, [stranica])


konst fetchData = (stranica) => {
konst nove stavke = []


za (neka ja = 0; ja < 100; i++) {
nove stvari.gurnuti(ja)
 }


if (stranica 100) {
 setHasMore(lažno)
 }


setItems([...stavke, ...nove stavke])
 }


konst onScroll = () => {
konst scrollTop = dokument.documentElement.scrollTop
konst visina pomicanja = dokument.documentElement.scrollHeight
konst Visina klijenta = dokument.documentElement.clientHeight


if (scrollTop + clientHeight >= visina pomicanja) {
 setPage (stranica + 1)
 }
 }


useEffect(() => {
 window.addEventListener('svitak', onScroll)
 povratak () => window.removeEventListener('svitak', onScroll)
 }, [stavke])


povratak (
<div>
 {items.map((stavka, indeks) => (
<div ključ={index}>
 {artikal}
</div>
 ))}
</div>
 )
}
izvozzadano aplikacija

Ovaj kôd koristi kuke useState i useEffect za upravljanje stanjem i nuspojavama.

U kuki useEffect poziva metodu fetchData s trenutnom stranicom. Metoda fetchData upućuje API poziv za dobivanje podataka. U ovom primjeru samo generirate neke lažne podatke kako biste demonstrirali tehniku.

Petlja for popunjava polje newItems sa 100 cijelih brojeva. Ako je parametar stranice 100, postavite oznaku hasMore na false. Ovo će zaustaviti komponentu InfiniteScroll od daljnjih API poziva. Na kraju postavite stanje s novim podacima.

Metoda onScroll prati položaj pomicanja. Ako se korisnik pomaknuo do dna stranice, možete učitati više podataka.

UseEffect kuka dodaje slušatelja događaja za događaj pomicanja. Kada se aktivira događaj pomicanja, on poziva metodu onScroll.

Postoje prednosti i mane korištenja beskonačnog pomicanja. Može pomoći u poboljšanju korisničkog sučelja, što omogućuje glatko iskustvo, posebno na mobilnim uređajima. Međutim, to također može dovesti do toga da korisnici propuste sadržaj jer se možda neće pomaknuti dovoljno daleko da ga vide.

Važno je odvagnuti prednosti i nedostatke tehnike beskonačnog svitka prije nego što ga implementirate na svoju web stranicu ili aplikaciju.

Dodavanje beskonačnog pomicanja na vašu web stranicu ili aplikaciju React.js može pomoći u poboljšanju korisničkog iskustva. S beskonačnim pomicanjem korisnici ne moraju klikati da bi vidjeli više sadržaja. Korištenje Infinite Scroll u vašoj aplikaciji React.js također može pomoći u smanjenju broja učitavanja stranica, što može poboljšati performanse.

Također možete jednostavno i besplatno implementirati svoju React aplikaciju na Github stranice.