Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

Har du noen gang kommet over et nettsted eller en app som laster inn og viser mer innhold mens du blar? Dette er det vi kaller en uendelig rulle.

Uendelig rulling er en populær teknikk som reduserer antall sideinnlastinger. Det kan også gi en jevnere brukeropplevelse, spesielt på mobile enheter.

Det er noen forskjellige måter du kan implementere uendelig rulling i React.js. En måte er å bruke et bibliotek som react-infinite-scroll-component. Dette biblioteket har en komponent som vil utløse en hendelse når brukeren ruller til bunnen av siden. Du kan deretter bruke denne hendelsen til å laste inn mer innhold.

En annen måte å implementere uendelig rulling på er å bruke de innebygde funksjonene som React gir. En slik funksjon er "componentDidMount" som React kaller når en komponent først monteres.

Du kan bruke denne funksjonen til å laste den første batchen med data og deretter bruke "componentDidUpdate"-funksjonen for å laste inn flere data når brukeren ruller nedover. Du kan også

instagram viewer
bruk React kroker for å legge til en uendelig rullefunksjon.

For å bruke react-infinite-scroll-component, må du installere den først ved å bruke npm:

npm installere reagere-uendelig-bla-komponent --lagre

Deretter kan du importere den til React-komponenten din.

import Reagere fra 'reagere'
import Uendelig rulling fra 'reager-uendelig-rulle-komponent'
klasseAppstrekkerReagere.Komponent{
konstruktør() {
super()
dette.state = {
gjenstander: [],
 har mer: ekte
 }
 }


componentDidMount() {
dette.fetchData(1)
 }


fetchData = (side) => {
konst newItems = []


til (la jeg = 0; jeg < 100; i++) {
nye ting.trykk(Jeg )
 }


if (side 100) {
dette.setState({ har mer: falsk })
 }


dette.setState({ gjenstander: [...this.state.items, ...newItems] })
 }


render() {
komme tilbake (
<div>
<h1>Uendelig rulling</h1>
<Uendelig rulling
 datalengde={dette.state.items.length}
 neste={dette.fetchData}
 harMer={dette.state.hasMore}
 loader={<h4>Laster inn...</h4>}
 endMessage={
<p style={{ textAlign: 'senter' }}>
<b>Jippi! Du har sett alt</b>
</s>
 }
>
 {dette.state.items.map((vare, indeks) => (
<div nøkkel={indeks}>
 {punkt}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksportmisligholde App

Denne koden starter med å importere React og InfiniteScroll-komponenten fra react-infinite-scroll-component-biblioteket. Den oppretter deretter en tilstandsfull komponent og initialiserer tilstanden med en tom gjenstander array og en har mer flagget satt til sant.

I componentDidMount livssyklusmetoden kaller du henteData metode med en side parameter av 1. FetchData-metoden foretar et API-kall for å få noen data. Dette eksemplet genererer bare noen dummy-data. Den lager deretter en rekke med 100 elementer.

Hvis sideparameteren er 100, er det ikke flere elementer, så sett hasMore-flagget til false. Dette vil stoppe InfiniteScroll-komponenten fra å foreta flere API-kall. Til slutt, angi tilstanden ved hjelp av de nye dataene.

Gjengivelsesmetoden bruker InfiniteScroll-komponenten og sender inn noen rekvisitter. DataLength-rekvisitten er satt til lengden på elementarrayen. Den neste rekvisitten er satt til fetchData-metoden. hasMore-rekvisitten er satt til hasMore-flagget. Lasterrekvisitten får komponenten til å gjengi innholdet som en lasteindikator. På samme måte vil den gjengi endMessage-rekvisitten som en melding når alle dataene er ferdig lastet.

Det er også andre rekvisitter som du kan sende til InfiniteScroll-komponenten, men det er disse du vil bruke oftest.

Bruke innebygde funksjoner

React har også noen innebygde metoder som du kan bruke for å implementere uendelig rulling.

Den første metoden er componentDidUpdate. React kaller denne metoden etter at den har oppdatert en komponent. Du kan bruke denne metoden til å sjekke om brukeren har rullet til bunnen av siden og i så fall laste inn flere data.

Den andre metoden er bla, som React ringer når brukeren ruller. Du kan bruke denne metoden til å holde styr på rulleposisjonen. Hvis brukeren har scrollet til bunnen av siden, kan du laste inn flere data.

Her er et eksempel på hvordan du kan bruke disse metodene for å implementere uendelig rulling:

import Reager, {useState, useEffect} fra 'reagere'
funksjonApp() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(ekte)
konst [side, setPage] = useState(1)


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


konst fetchData = (side) => {
konst newItems = []


til (la jeg = 0; jeg < 100; i++) {
nye ting.trykk(Jeg)
 }


if (side 100) {
 settHasMer(falsk)
 }


setItems([...varer, ...nye varer])
 }


konst onScroll = () => {
konst scrollTopp = dokument.documentElement.scrollTop
konst rullehøyde = dokument.documentElement.scrollHeight
konst klienthøyde = dokument.documentElement.clientHeight


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


useEffect(() => {
 window.addEventListener('bla', onScroll)
 return () => window.removeEventListener('bla', onScroll)
 }, [varer])


komme tilbake (
<div>
 {items.map((vare, indeks) => (
<div nøkkel={indeks}>
 {punkt}
</div>
 ))}
</div>
 )
}
eksportmisligholde App

Denne koden bruker useState og useEffect-krokene for å håndtere tilstand og bivirkninger.

I useEffect-kroken kaller den opp fetchData-metoden med gjeldende side. FetchData-metoden foretar et API-kall for å få noen data. I dette eksemplet genererer du bare noen dummy-data for å demonstrere teknikken.

For-løkken fyller newItems-matrisen med 100 heltall. Hvis sideparameteren er 100, sett hasMore-flagget til false. Dette vil stoppe InfiniteScroll-komponenten fra å foreta flere API-kall. Til slutt setter du tilstanden med de nye dataene.

OnScroll-metoden holder styr på rulleposisjonen. Hvis brukeren har scrollet til bunnen av siden, kan du laste inn flere data.

UseEffect-kroken legger til en hendelseslytter for rullehendelsen. Når scroll-hendelsen utløses, kaller den onScroll-metoden.

Det er fordeler og ulemper med å bruke uendelig rulling. Det kan bidra til å forbedre brukergrensesnittet, noe som gir en jevnere opplevelse, spesielt på mobile enheter. Det kan imidlertid også føre til at brukere mangler innhold, da de kanskje ikke ruller langt nok ned til å se det.

Det er viktig å veie fordeler og ulemper av den uendelige rulleteknikken før du implementerer det på nettstedet eller appen din.

Å legge til uendelig rulling til React.js-nettstedet eller appen din kan bidra til å forbedre brukeropplevelsen. Med uendelig rulling trenger ikke brukere å klikke for å se mer innhold. Å bruke Infinite Scroll i React.js-appen din kan også bidra til å redusere antall sideinnlastinger, noe som kan forbedre ytelsen.

Du kan også enkelt distribuere React-appen din til Github-sider gratis.