Hur man lägger till oändlig rullning i React.js
Har du någonsin stött på en webbplats eller app som laddar och visar mer innehåll när du scrollar? Det är vad vi kallar infinite scroll.
Infinite scroll är en allt vanligare metod som kan underlätta genomläsning av stora mängder data och förbättra den övergripande användarupplevelsen, särskilt på bärbara prylar.
Implementera infinite scrolling i React.js
Det finns flera metoder för att implementera infinite scrolling i en React-applikation, en sådan metod innebär att man använder ett bibliotek som heter react-infinite-scroll-component . Detta specifika biblioteks komponent övervakar användarens scrollbeteende och skickar en händelse när de når slutet av sidan. Genom att utnyttja denna händelse kan du sedan initiera laddningen av ytterligare innehåll.
För att integrera en instans av oändlig scrollning i en React-applikation kan man utnyttja de inneboende funktionerna i ramverket. Bland dessa funktioner finns metoden “componentDidMount”, som React aktiverar när en komponent initialiseras.
Du kan använda denna funktion för att ladda en första uppsättning data, och därefter använda metoden “componentDidUpdate” för att hämta ytterligare information när användaren rullar längre ner på sidan.
React Hooks kan användas för att implementera en oändlig rullningsfunktion i din applikation, vilket ger en sömlös användarupplevelse eftersom innehåll kontinuerligt laddas utan avbrott.
Använda biblioteket react-infinite-scroll-component
Flera tillvägagångssätt kan användas vid användning av React Infinite Scroll Component.
Installera react-infinite-scroll-component
Det första steget för att börja använda biblioteket är att installera det via Node Package Manager (npm).
npm install react-infinite-scroll-component --save
Importera react-infinite-scroll-component till React
Efter monteringen är det nödvändigt att införliva infinite scroll-biblioteket i ditt React-element.
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>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Koden importerar både React och InfiniteScroll-komponenten från biblioteket react-infinite-scroll-component och skapar därefter en stateful-komponent. Komponentens initiala tillstånd består av en tom “items”-array och en “hasMore”-flagga som är inställd på true.
Ange parametrar
I livscykelmetoden componentDidMount är det absolut nödvändigt att anropa funktionen fetchData med en sida parameter inställd på 1 . Proceduren fetchData utför en API-begäran för att hämta data.Denna React infinite scroller-instans producerar fiktiva data och konstruerar en array som innehåller hundra element.
Efter att ha uppnått ett värde på hundra för page-parametern, vilket indikerar att det inte finns några ytterligare tillgängliga objekt, är det klokt att konfigurera “hasMore”-flaggan som false, vilket förhindrar ytterligare anrop av InfiniteScroll-komponenten. Därefter är det en effektiv åtgärd att uppdatera tillståndet med den nyligen förvärvade datauppsättningen.
Metoden render utnyttjar komponenten InfiniteScroll och tillhandahåller vissa egenskaper som argument. Specifikt tilldelas egenskapen dataLength ett värde som motsvarar längden på matrisen items . Dessutom fungerar fetchData -funktionen som en annan tillhandahållen egenskap. Slutligen sätts egenskapen hasMore lika med värdet på flaggan hasMore .
Egenskapen loader fungerar genom att presentera komponentens innehåll som en laddningsindikation. På samma sätt visas egenskapen endMessage som ett meddelande i komponenten när all dataladdning har slutförts.
När man använder komponenten InfiniteScroll är det vanligt att använda vissa rekvisita som används ofta. Man kan dock även använda ytterligare rekvisita efter behov.
Använda inbyggda funktioner
React tillhandahåller en uppsättning inbyggda funktioner som möjliggör implementering av InfiniteScroll genom användning av dess inbyggda metoder.
Livscykelmetoden componentDidUpdate i React anropas av ramverket efter en uppdatering av en komponent. Denna händelsestyrda metod gör det möjligt för utvecklare att implementera anpassad logik för att upptäcka när nya data behöver hämtas baserat på användarens scrollposition. I huvudsak fungerar metoden som en mekanism för att avgöra om ytterligare innehåll ska laddas under den aktuella visningströskeln när det upptäcks att användaren har nått slutet av den synliga delen av sidan.
React har en inbyggd mekanism som heter scroll , som utlöses av användarens scrollåtgärd, så att utvecklare kan övervaka och upprätthålla medvetenheten om den aktuella scrollpositionen i sin applikation. Detta händelsestyrda tillvägagångssätt möjliggör dynamisk laddning av ytterligare innehåll när användaren når botten av det synliga sidintervallet, vilket säkerställer en optimal surfupplevelse.
Den medföljande koden visar ett exempel på användning av ovannämnda tekniker inom ramen för en React-applikation, särskilt i förhållande till implementering av en oändlig rullningsfunktion.
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
Denna kod använder sig av både useState och useEffect krokar för att underlätta hanteringen av tillstånd samt implementera önskade sidoeffekter inom applikationen.
Inom ramen för useEffect kroken, anropar den nuvarande iterationen av funktionen fetchData metoden genom att skicka med pagineringens aktuella tillstånd som en parameter. Metoden utför sedan en HTTP-begäran för att hämta information från en extern källa. I detta fall simulerar vi genereringen av vissa hypotetiska data för att exemplifiera det koncept som diskuteras, endast i illustrativt syfte.
For-slingan lägger iterativt till en serie element till arrayen newItems , som ökar stegvis i värde tills den når hundra. Samtidigt, om det förutbestämda värdet på parametern page överstiger hundra, sätts den booleska variabeln hasMore till false, vilket stoppar alla ytterligare förfrågningar från den oändliga rullningsmekanismen.
Slutligen, fastställ aktuell status baserat på den uppdaterade informationen.
Metoden onScroll håller reda på den aktuella bläddringspositionen, och när sidan når botten laddar den dynamiskt ytterligare innehåll eller data som svar på ytterligare användarinteraktion med gränssnittet.
Användningen av useEffect Hook gör det möjligt att lägga till en lyssnare för rullningshändelsen. När denna händelse inträffar anropas metoden onScroll .
För- och nackdelar med oändlig scrollning i React
Reacts implementering av oändlig scrollning har både fördelar och nackdelar. Å ena sidan förbättrar denna funktion det övergripande användargränssnittet genom att ge en sömlös navigeringsupplevelse, särskilt på mobila plattformar där skärmutrymmet är begränsat. Å andra sidan finns det en potentiell risk att användare förbiser innehåll som ligger bortom deras ursprungliga synvinkel, eftersom de kanske inte har scrollat tillräckligt för att se alla objekt.
Det är viktigt att noggrant utvärdera fördelarna och nackdelarna med att använda en infinite scroll-teknik i webbdesign, eftersom detta tillvägagångssätt kan ha betydande konsekvenser för användarupplevelsen och engagemanget.
Förbättra användarupplevelsen med infinite scrolling i React.js
Att integrera en infinite scrolling-mekanism i en React.js-applikation kan förbättra den övergripande användarupplevelsen genom att eliminera behovet av ytterligare klick för att komma åt mer innehåll. Detta tillvägagångssätt har också potential att minska det totala antalet sidförfrågningar som görs, vilket ökar appens effektivitet och prestanda.
Att distribuera en React-applikation till GitHub Pages är en enkel process som inte kräver några ekonomiska investeringar.