Hur man lägger till Infinite Scroll i React.js

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

Har du någonsin stött på en webbplats eller app som laddar och visar mer innehåll när du rullar? Detta är vad vi kallar en oändlig rullning.

Oändlig rullning är en populär teknik som minskar antalet sidladdningar. Det kan också ge en smidigare användarupplevelse, särskilt på mobila enheter.

Det finns några olika sätt som du kan implementera oändlig rullning i React.js. Ett sätt är att använda ett bibliotek som react-infinite-scroll-component. Det här biblioteket tillhandahåller en komponent som kommer att utlösa en händelse när användaren rullar till botten av sidan. Du kan sedan använda den här händelsen för att ladda mer innehåll.

Ett annat sätt att implementera infinite scroll är att använda de inbyggda funktionerna som React tillhandahåller. En sådan funktion är "componentDidMount" som React anropar när en komponent monteras första gången.

Du kan använda den här funktionen för att ladda den första batchen med data och sedan använda funktionen "componentDidUpdate" för att ladda mer data när användaren rullar nedåt. Du kan också

använd React-krokar för att lägga till en funktion för oändlig rullning.

För att använda react-infinite-scroll-component måste du först installera den med npm:

npm Installera reagera-oändligt-skrolla-komponent --spara

Sedan kan du importera den till din React-komponent.

importera Reagera från 'reagera'
importera InfiniteScroll från 'reagera-oändlig-scroll-komponent'
klassAppsträcker sigReagera.Komponent{
konstruktör() {
super()
detta.state = {
föremål: [],
 har mer: Sann
 }
 }
componentDidMount() {
detta.fetchData(1)
 }
fetchData = (sida) => {
konst newItems = []
för (låta jag = 0; jag < 100; i++) {
nya saker.skjuta på(i )
 }
if (sida 100) {
detta.setState({ har mer: false })
 }
detta.setState({ föremål: [...this.state.items, ...newItems] })
 }
framställa() {
lämna tillbaka (
<div>
<h1>Oändlig rullning</h1>
<InfiniteScroll
 dataLength={detta.state.items.length}
 nästa={detta.fetchData}
 harMer={detta.state.hasMore}
 loader={<h4>Läser in...</h4>}
 endMessage={
<p style={{ textAlign: 'Centrum' }}>
<b>Jippie! Du har sett allt</b>
</s>
 }
>
 {detta.state.items.map((artikel, index) => (
<div nyckel={index}>
 {Artikel}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exporterastandard App

Denna kod börjar med att importera React och InfiniteScroll-komponenten från react-infinite-scroll-component-biblioteket. Den skapar sedan en tillståndsfull komponent och initierar tillståndet med en tom föremål array och en har mer flaggan inställd på sant.

I livscykelmetoden componentDidMount anropar du hämta Data metod med en sida parameter för 1. Metoden fetchData gör ett API-anrop för att få lite data. Det här exemplet genererar bara lite dummydata. Det skapar sedan en array med 100 objekt.

Om sidparametern är 100 finns det inga fler objekt, så ställ in hasMore-flaggan till false. Detta kommer att stoppa InfiniteScroll-komponenten från att göra ytterligare API-anrop. Slutligen, ställ in tillståndet med hjälp av de nya uppgifterna.

Renderingsmetoden använder InfiniteScroll-komponenten och skickar in vissa rekvisita. DataLength prop är inställd på längden på objektmatrisen. Nästa rekvisita är inställt på metoden fetchData. hasMore-rekvisiten är satt till hasMore-flaggan. Lastarstödet får komponenten att återge sitt innehåll som en laddningsindikator. På samma sätt kommer det att återge endMessage-propet som ett meddelande när all data har laddats klart.

Det finns också andra rekvisita som du kan skicka till InfiniteScroll-komponenten, men det är dessa du kommer att använda oftast.

Använda inbyggda funktioner

React har också några inbyggda metoder som du kan använda för att implementera oändlig rullning.

Den första metoden är componentDidUpdate. React anropar denna metod efter att en komponent uppdaterats. Du kan använda den här metoden för att kontrollera om användaren har scrollat ​​till botten av sidan och i så fall ladda mer data.

Den andra metoden är skrolla, som React anropar när användaren rullar. Du kan använda den här metoden för att hålla reda på rullningspositionen. Om användaren har scrollat ​​till botten av sidan kan du sedan ladda mer data.

Här är ett exempel på hur du kan använda dessa metoder för att implementera oändlig rullning:

importera Reagera, {useState, useEffect} från 'reagera'
fungeraApp() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(Sann)
konst [page, setPage] = useState(1)
useEffect(() => {
 fetchData (sida)
 }, [sida])
konst fetchData = (sida) => {
konst newItems = []
för (låta jag = 0; jag < 100; i++) {
nya saker.skjuta på(i)
 }
if (sida 100) {
 setHasMore(falsk)
 }
setItems([...artiklar, ...nya artiklar])
 }
konst onScroll = () => {
konst scrollTop = dokumentera.documentElement.scrollTop
konst scrollHeight = dokumentera.documentElement.scrollHeight
konst klienthöjd = dokumentera.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
 setPage (sida + 1)
 }
 }
useEffect(() => {
 window.addEventListener('skrolla', onScroll)
 returnera () => window.removeEventListener('skrolla', onScroll)
 }, [artiklar])
lämna tillbaka (
<div>
 {items.map((artikel, index) => (
<div nyckel={index}>
 {Artikel}
</div>
 ))}
</div>
 )
}
exporterastandard App

Den här koden använder hakarna useState och useEffect för att hantera tillstånd och biverkningar.

I useEffect-kroken anropar den fetchData-metoden med den aktuella sidan. Metoden fetchData gör ett API-anrop för att få lite data. I det här exemplet genererar du bara lite dummydata för att demonstrera tekniken.

For-loopen fyller newItems-matrisen med 100 heltal. Om sidparametern är 100, ställ in hasMore-flaggan till false. Detta kommer att stoppa InfiniteScroll-komponenten från att göra ytterligare API-anrop. Slutligen, ställ in tillståndet med de nya uppgifterna.

OnScroll-metoden håller reda på rullningspositionen. Om användaren har scrollat ​​till botten av sidan kan du ladda mer data.

UseEffect-kroken lägger till en händelseavlyssnare för rullningshändelsen. När scroll-händelsen utlöses anropar den onScroll-metoden.

Det finns för- och nackdelar med att använda oändlig rullning. Det kan hjälpa till att förbättra användargränssnittet, vilket ger en smidigare upplevelse, särskilt på mobila enheter. Det kan dock också leda till att användare missar innehåll eftersom de kanske inte rullar ner tillräckligt långt för att se det.

Det är viktigt att väga för- och nackdelar av den oändliga rullningstekniken innan du implementerar det på din webbplats eller app.

Att lägga till oändlig rullning till din React.js-webbplats eller app kan hjälpa till att förbättra användarupplevelsen. Med oändlig rullning behöver användare inte klicka för att se mer innehåll. Att använda Infinite Scroll i din React.js-app kan också hjälpa till att minska antalet sidladdningar, vilket kan förbättra prestandan.

Du kan också enkelt distribuera din React-app till Github-sidor gratis.