Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Oletko koskaan törmännyt verkkosivustoon tai sovellukseen, joka lataa ja näyttää enemmän sisältöä vierittäessäsi? Tätä kutsumme äärettömäksi rullaksi.

Infinite scroll on suosittu tekniikka, joka vähentää sivujen latausten määrää. Se voi myös parantaa käyttökokemusta, etenkin mobiililaitteilla.

On olemassa muutamia eri tapoja, joilla voit toteuttaa äärettömän vierityksen React.js: ssä. Yksi tapa on käyttää kirjastoa, kuten react-infinite-scroll-komponentti. Tämä kirjasto sisältää osan, joka käynnistää tapahtuman, kun käyttäjä vierittää sivun alareunaan. Tämän tapahtuman avulla voit ladata lisää sisältöä.

Toinen tapa toteuttaa ääretön vieritys on käyttää Reactin tarjoamia sisäänrakennettuja toimintoja. Yksi tällainen toiminto on "componentDidMount", jota React kutsuu, kun komponentti asennetaan ensimmäisen kerran.

Voit käyttää tätä toimintoa ensimmäisen tietoerän lataamiseen ja sitten käyttää "componentDidUpdate"-toimintoa ladataksesi lisää tietoja, kun käyttäjä vierittää alaspäin. Voit myös

käytä React-koukkuja lisätäksesi loputtoman vieritysominaisuuden.

Jos haluat käyttää react-infinite-scroll-komponenttia, sinun on asennettava se ensin npm: n avulla:

npm Asentaa reagoi-ääretön-rullaa-komponentti --Tallentaa

Sitten voit tuoda sen React-komponenttiin.

tuonti Reagoi alkaen 'reagoi'
tuonti Loputon selaaminen alkaen "react-infinite-scroll-komponentti"
luokkaaSovellusulottuuReagoi.Komponentti{
rakentaja() {
super()
Tämä.state = {
kohteita: [],
 on enemmän: totta
 }
 }


componentDidMount() {
Tämä.fetchData(1)
 }


fetchData = (sivu) => {
konst uudet kohteet = []


varten (antaa minä = 0; minä < 100; i++) {
uusia tavaroita.työntää(i )
 }


jos (sivu 100) {
Tämä.setState({ on enemmän: väärä })
 }


Tämä.setState({ kohteita: [...this.state.items, ...newItems] })
 }


render() {
palata (
<div>
<h1>Loputon selaaminen</h1>
<Loputon selaaminen
 dataLength={Tämä.state.items.length}
 seuraava={Tämä.fetchData}
 hasMore={Tämä.state.hasMore}
 loader={<h4>Ladataan...</h4>}
 endMessage={
<p style={{ textAlign: 'keskusta' }}>
<b>Jee! Olet nähnyt kaiken</b>
</s>
 }
>
 {Tämä.state.items.map((nimike, hakemisto) => (
<div avain={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
viedäoletuksena Sovellus

Tämä koodi alkaa tuomalla React ja InfiniteScroll-komponentti react-infinite-scroll-komponenttikirjastosta. Sitten se luo tilallisen komponentin ja alustaa tilan tyhjällä kohteita array ja a on enemmän lippu asetettu tosi.

ComponentDidMount-elinkaarimenetelmässä kutsut fetchData menetelmä a sivu parametri 1. FetchData-menetelmä tekee API-kutsun saadakseen tietoja. Tämä esimerkki luo vain vääriä tietoja. Sitten se luo 100 kohteen joukon.

Jos sivuparametri on 100, kohteita ei ole enää, joten aseta hasMore-lippu arvoon false. Tämä estää InfiniteScroll-komponenttia tekemästä uusia API-kutsuja. Aseta lopuksi tila käyttämällä uusia tietoja.

Renderöintimenetelmä käyttää InfiniteScroll-komponenttia ja ohittaa joitain rekvisiitta. DataLength prop on asetettu kohteiden taulukon pituuteen. Seuraava ehdotus on asetettu fetchData-menetelmään. HasMore-propaani on asetettu hasMore-lipulle. Kuormaimen tuki saa komponentin näyttämään sisällön latausilmaisimena. Samoin se tekee endMessage-propionista viestin, kun kaikki tiedot on ladattu.

On myös muita apuvälineitä, joita voit siirtää InfiniteScroll-komponenttiin, mutta näitä käytät useimmin.

Sisäisten toimintojen käyttäminen

Reactissa on myös joitain sisäänrakennettuja menetelmiä, joita voit käyttää äärettömän vierityksen toteuttamiseen.

Ensimmäinen menetelmä on componentDidUpdate. React kutsuu tätä menetelmää komponentin päivittämisen jälkeen. Tällä menetelmällä voit tarkistaa, onko käyttäjä vierittänyt sivun alareunaan, ja jos on, ladata lisää tietoja.

Toinen menetelmä on rullaa, jota React kutsuu, kun käyttäjä vierittää. Tällä menetelmällä voit seurata vierityskohtaa. Jos käyttäjä on vierittänyt sivun alareunaan, voit ladata lisää tietoja.

Tässä on esimerkki siitä, kuinka voit käyttää näitä menetelmiä äärettömän vierityksen toteuttamiseen:

tuonti React, {useState, useEffect} alkaen 'reagoi'
toimintoSovellus() {
konst [kohteet, setItems] = useState([])
konst [hasMore, setHasMore] = useState(totta)
konst [sivu, setPage] = useState(1)


useEffect(() => {
 fetchData (sivu)
 }, [sivu])


konst fetchData = (sivu) => {
konst uudet kohteet = []


varten (antaa minä = 0; minä < 100; i++) {
uusia tavaroita.työntää(i)
 }


jos (sivu 100) {
 setHasMore(väärä)
 }


setItems([...kohteita, ...uusia kohteita])
 }


konst onScroll = () => {
konst scrollTop = asiakirja.documentElement.scrollTop
konst scrollHeight = asiakirja.documentElement.scrollHeight
konst asiakkaan korkeus = asiakirja.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (sivu + 1)
 }
 }


useEffect(() => {
 window.addEventListener('rullaa', onScroll)
 paluu () => window.removeEventListener('rullaa', onScroll)
 }, [kohteet])


palata (
<div>
 {items.map((nimike, hakemisto) => (
<div avain={index}>
 {item}
</div>
 ))}
</div>
 )
}
viedäoletuksena Sovellus

Tämä koodi käyttää useState- ja useEffect-koukkuja tilan ja sivuvaikutusten hallitsemiseen.

UseEffect-koukussa se kutsuu fetchData-menetelmää nykyisen sivun kanssa. FetchData-menetelmä tekee API-kutsun saadakseen tietoja. Tässä esimerkissä luot vain vääriä tietoja tekniikan havainnollistamiseksi.

For-silmukka täyttää newItems-taulukon 100 kokonaisluvulla. Jos sivuparametri on 100, aseta hasMore-lipun arvoksi false. Tämä estää InfiniteScroll-komponenttia tekemästä uusia API-kutsuja. Aseta lopuksi tila uusilla tiedoilla.

OnScroll-menetelmä seuraa vierityskohtaa. Jos käyttäjä on vierittänyt sivun alareunaan, voit ladata lisää tietoja.

UseEffect-koukku lisää tapahtumakuuntelijan vieritystapahtumaan. Kun vieritystapahtuma käynnistyy, se kutsuu onScroll-menetelmää.

Äärettömän vierityksen käytössä on hyviä ja huonoja puolia. Se voi auttaa parantamaan käyttöliittymää, mikä tekee käyttökokemuksesta sujuvamman erityisesti mobiililaitteissa. Se voi kuitenkin myös johtaa siihen, että käyttäjät menettävät sisältöä, koska he eivät välttämättä vierittää alas tarpeeksi pitkälle nähdäkseen sen.

On tärkeää punnita edut ja haitat äärettömän vieritystekniikasta ennen kuin otat sen käyttöön verkkosivustollasi tai sovelluksessasi.

Loputtoman vierityksen lisääminen React.js-verkkosivustollesi tai -sovellukseesi voi auttaa parantamaan käyttökokemusta. Äärimmäisen vierityksen ansiosta käyttäjien ei tarvitse napsauttaa nähdäkseen lisää sisältöä. Infinite Scrollin käyttäminen React.js-sovelluksessa voi myös auttaa vähentämään sivujen latausten määrää, mikä voi parantaa suorituskykyä.

Voit myös helposti ottaa React-sovelluksesi käyttöön Github-sivuilla ilmaiseksi.