Implementacija beskonačnog skrolovanja u React aplikacijama
Da li ste ikada koristili veb stranicu ili aplikaciju gde se novi sadržaj učitava dok skrolujete naniže? To se naziva beskonačno skrolovanje.
Beskonačno skrolovanje je popularna tehnika koja olakšava pregled velike količine sadržaja. Takođe, korisničko iskustvo može biti poboljšano, posebno na mobilnim uređajima.
Postoji nekoliko načina da se implementira beskonačno skrolovanje u React-u. Jedan od načina je korišćenje biblioteke kao što je `react-infinite-scroll-component`. Ova biblioteka aktivira događaj kada korisnik skroluje do dna stranice, što se zatim može iskoristiti za učitavanje dodatnog sadržaja.
Drugi pristup je korišćenje ugrađenih React funkcija. Jedna od tih funkcija je `componentDidMount`, koju React poziva prilikom inicijalnog montiranja komponente.
Ova funkcija se može iskoristiti za učitavanje prvog seta podataka, a zatim funkcija `componentDidUpdate` za naknadno učitavanje podataka kako korisnik skroluje naniže.
React hooks takođe mogu biti upotrebljeni za dodavanje funkcionalnosti beskonačnog skrolovanja.
Postoji nekoliko načina za korišćenje komponente `react-infinite-scroll-component`.
Instaliranje komponente `react-infinite-scroll-component`
Da biste započeli, potrebno je prvo instalirati biblioteku putem npm-a:
npm install react-infinite-scroll-component --save
Uvoz komponente `react-infinite-scroll-component` u React
Nakon instalacije, biblioteku za beskonačno skrolovanje treba uvesti u React komponentu.
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>Beskonačno Skrolovanje</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Učitavanje...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Sve je učitano!</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Ovaj kod prvo uvozi React i `InfiniteScroll` komponentu iz biblioteke. Zatim kreira komponentu koja inicijalizuje stanje sa praznim nizom `items` i `hasMore` zastavicom postavljenom na `true`.
Konfigurisanje parametara
U `componentDidMount` metodi životnog ciklusa, poziva se `fetchData` metoda sa parametrom `page` postavljenim na 1. Metoda `fetchData` šalje API zahtev za preuzimanje podataka. Ovaj primer generiše lažne podatke, kreirajući niz od 100 stavki.
Kada parametar `page` dostigne 100, zastavica `hasMore` se postavlja na `false`, jer više nema stavki za učitavanje. Ovo sprečava `InfiniteScroll` komponentu da nastavi sa API pozivima. Na kraju, stanje se ažurira novim podacima.
Metoda renderovanja koristi `InfiniteScroll` komponentu, prosleđujući joj određene propse. `dataLength` props se postavlja na dužinu niza `items`. `next` props se postavlja na `fetchData` metodu. `hasMore` props se postavlja na vrednost `hasMore` zastavice.
`loader` props omogućava prikazivanje sadržaja kao indikator učitavanja. Slično tome, `endMessage` props prikazuje poruku kada su svi podaci učitani.
Mogu se proslediti i drugi propsovi `InfiniteScroll` komponenti, ali ovi su najčešće korišćeni.
Korišćenje ugrađenih funkcija
React takođe ima ugrađene metode koje se mogu koristiti za implementiranje beskonačnog skrolovanja.
Prva metoda je `componentDidUpdate`. React je poziva nakon ažuriranja komponente. Može se iskoristiti da se proveri da li je korisnik skrolovao do dna stranice, i ako jeste, učitaju se dodatni podaci.
Druga metoda je `scroll`, koju React poziva kada korisnik skroluje. Ona omogućava praćenje pozicije skrolovanja i učitavanje novih podataka kada korisnik dođe do dna stranice.
Sledi primer beskonačnog skrolovanja u React-u koji demonstrira upotrebu ovih metoda:
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
Ovaj kod koristi `useState` i `useEffect` hookove za upravljanje stanjem i sporednim efektima.
Unutar `useEffect` hook-a, poziva se `fetchData` metoda sa trenutnom stranicom. `fetchData` metoda upućuje API poziv za preuzimanje podataka. U ovom primeru, generišu se lažni podaci radi demonstracije tehnike.
`for` petlja popunjava `newItems` niz sa 100 celih brojeva. Ako je parametar `page` 100, zastavica `hasMore` se postavlja na `false`. Ovo sprečava komponentu beskonačnog skrolovanja da nastavi sa API pozivima.
Na kraju, stanje se ažurira novim podacima.
Metoda `onScroll` prati poziciju skrolovanja i učitava nove podatke kada korisnik dođe do dna stranice.
`useEffect` hook dodaje osluškivač događaja za skrolovanje. Kada se događaj skrolovanja pokrene, poziva se `onScroll` metoda.
Postoje prednosti i nedostaci korišćenja beskonačnog skrolovanja u React-u. Poboljšava korisnički interfejs, stvarajući glatkije iskustvo, posebno na mobilnim uređajima. Međutim, može se desiti da korisnici propuste sadržaj jer možda neće skrolovati dovoljno nisko da ga vide.
Pre primene beskonačnog skrolovanja na vašu veb stranicu ili aplikaciju, neophodno je odmeriti njegove prednosti i nedostatke.
Dodavanje beskonačnog skrolovanja vašoj React.js veb stranici ili aplikaciji može poboljšati korisničko iskustvo. Korisnici ne moraju da klikću da bi videli dodatni sadržaj, što redukuje broj učitavanja stranice i poboljšava performanse.
Takođe, svoju React aplikaciju možete jednostavno besplatno postaviti na GitHub stranice.