Sådan tilføjes Infinite Scroll i React.js

Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

Har du nogensinde stødt på et websted eller en app, der indlæser og viser mere indhold, mens du ruller? Dette er, hvad vi kalder en uendelig rulle.

Infinite scroll er en populær teknik, der reducerer antallet af sideindlæsninger. Det kan også give en mere jævn brugeroplevelse, især på mobile enheder.

Der er et par forskellige måder, hvorpå du kan implementere uendelig scroll i React.js. En måde er at bruge et bibliotek som react-infinite-scroll-component. Dette bibliotek indeholder en komponent, der udløser en hændelse, når brugeren ruller til bunden af ​​siden. Du kan derefter bruge denne begivenhed til at indlæse mere indhold.

En anden måde at implementere uendelig scroll på er at bruge de indbyggede funktioner, som React tilbyder. En sådan funktion er "componentDidMount", som React kalder, når en komponent monteres første gang.

Du kan bruge denne funktion til at indlæse den første batch af data og derefter bruge funktionen "componentDidUpdate" til at indlæse flere data, når brugeren ruller ned. Du kan også

brug React kroge for at tilføje en uendelig rullefunktion.

For at bruge react-infinite-scroll-component skal du først installere den ved hjælp af npm:

npm installere reagere-uendelig-rulle-komponent --Gemme

Derefter kan du importere det til din React-komponent.

importere Reagere fra 'reagere'
importere Uendelig rulle fra 'reager-uendelig-scroll-komponent'
klasseAppstrækker sigReagere.Komponent{
konstruktør() {
super()
det her.state = {
genstande: [],
 harMere: rigtigt
 }
 }
componentDidMount() {
det her.fetchData(1)
 }
fetchData = (side) => {
konst newItems = []
til (lade i = 0; jeg < 100; i++) {
nye varer.skubbe(jeg )
 }
if (side 100) {
det her.setState({ har mere: falsk })
 }
det her.setState({ genstande: [...this.state.items, ...newItems] })
 }
render() {
Vend tilbage (
<div>
<h1>Uendelig rulle</h1>
<Uendelig rulle
 datalængde={det her.state.varer.længde}
 næste={det her.fetchData}
 harMere={det her.state.hasMore}
 loader={<h4>Indlæser...</h4>}
 endMessage={
<p style={{ textAlign: 'centrum' }}>
<b>Yay! Du har set det hele</b>
</s>
 }
>
 {det her.state.items.map((vare, indeks) => (
<div nøgle={indeks}>
 {vare}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksportStandard App

Denne kode starter med at importere React og InfiniteScroll-komponenten fra react-infinite-scroll-component-biblioteket. Den opretter derefter en tilstandsfuld komponent og initialiserer tilstanden med en tom genstande array og en har mere flag sat til sand.

I componentDidMount livscyklusmetoden kalder du henteData metode med en side parameter af 1. FetchData-metoden laver et API-kald for at få nogle data. Dette eksempel genererer bare nogle dummy-data. Det opretter derefter en række af 100 elementer.

Hvis sideparameteren er 100, er der ikke flere elementer, så sæt hasMore-flaget til false. Dette vil forhindre InfiniteScroll-komponenten i at foretage yderligere API-kald. Indstil til sidst tilstanden ved hjælp af de nye data.

Gengivelsesmetoden bruger InfiniteScroll-komponenten og sender nogle rekvisitter ind. DataLength prop er indstillet til længden af ​​elementarrayet. Den næste prop er sat til fetchData-metoden. hasMore prop er sat til hasMore flaget. Læsserstøtten får komponenten til at gengive sit indhold som en belastningsindikator. Ligeledes vil den gengive endMessage prop som en besked, når alle data er færdige med at blive indlæst.

Der er også andre rekvisitter, som du kan overføre til InfiniteScroll-komponenten, men det er dem, du vil bruge oftest.

Brug af indbyggede funktioner

React har også nogle indbyggede metoder, som du kan bruge til at implementere uendelig scroll.

Den første metode er componentDidUpdate. React kalder denne metode efter at den har opdateret en komponent. Du kan bruge denne metode til at kontrollere, om brugeren har rullet til bunden af ​​siden, og i så fald indlæse flere data.

Den anden metode er rulle, som React kalder, når brugeren scroller. Du kan bruge denne metode til at holde styr på rullepositionen. Hvis brugeren har scrollet til bunden af ​​siden, kan du derefter indlæse flere data.

Her er et eksempel på, hvordan du kan bruge disse metoder til at implementere uendelig scroll:

importere Reager, {useState, useEffect} fra 'reagere'
fungereApp() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(rigtigt)
konst [side, setPage] = useState(1)
useEffect(() => {
 fetchData (side)
 }, [side])
konst fetchData = (side) => {
konst newItems = []
til (lade i = 0; jeg < 100; i++) {
nye varer.skubbe(jeg)
 }
if (side 100) {
 sætHasMore(falsk)
 }
sætelementer([...varer, ...nye varer])
 }
konst onScroll = () => {
konst scrollTop = dokument.documentElement.scrollTop
konst rullehøjde = dokument.documentElement.scrollHeight
konst klienthøjde = dokument.documentElement.clientHeight
if (scrollTop + clientHeight >= rullehøjde) {
 setPage (side + 1)
 }
 }
useEffect(() => {
 window.addEventListener('rulle', onScroll)
 returnere () => window.removeEventListener('rulle', onScroll)
 }, [varer])
Vend tilbage (
<div>
 {items.map((vare, indeks) => (
<div nøgle={indeks}>
 {vare}
</div>
 ))}
</div>
 )
}
eksportStandard App

Denne kode bruger useState og useEffect hooks til at administrere tilstand og bivirkninger.

I useEffect-hooken kalder den fetchData-metoden med den aktuelle side. FetchData-metoden laver et API-kald for at få nogle data. I dette eksempel genererer du bare nogle dummy-data for at demonstrere teknikken.

For-løkken udfylder newItems-arrayet med 100 heltal. Hvis sideparameteren er 100, skal flaget hasMore indstilles til false. Dette vil forhindre InfiniteScroll-komponenten i at foretage yderligere API-kald. Indstil til sidst tilstanden med de nye data.

OnScroll-metoden holder styr på rullepositionen. Hvis brugeren har scrollet til bunden af ​​siden, kan du indlæse flere data.

UseEffect-krogen tilføjer en begivenhedslytter til rullebegivenheden. Når scroll-hændelsen udløses, kalder den onScroll-metoden.

Der er fordele og ulemper ved at bruge uendelig scroll. Det kan hjælpe med at forbedre brugergrænsefladen, hvilket giver en mere jævn oplevelse, især på mobile enheder. Det kan dog også føre til, at brugerne mangler indhold, da de måske ikke ruller langt nok ned til at se det.

Det er vigtigt at afveje fordele og ulemper af den uendelige rulleteknik før du implementerer det på din hjemmeside eller app.

Tilføjelse af uendelig scroll til dit React.js-websted eller -app kan hjælpe med at forbedre brugeroplevelsen. Med uendelig rulning behøver brugerne ikke at klikke for at se mere indhold. Brug af Infinite Scroll i din React.js-app kan også hjælpe med at reducere antallet af sideindlæsninger, hvilket kan forbedre ydeevnen.

Du kan også nemt implementere din React-app til Github-sider gratis.