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 uendelig rulle.
Infinite scroll er en populær teknikk som kan gjøre det enklere å bla gjennom store mengder innhold. Det kan også gi en jevnere brukeropplevelse, spesielt på mobile enheter.
Du kan implementere uendelig rulling i React på noen forskjellige måter. Den første er å bruke et bibliotek som react-infinite-scroll-component. Dette bibliotekets komponent utløser en hendelse når brukeren ruller til bunnen av siden. Du kan deretter bruke denne hendelsen som en pekepinn for å laste inn mer innhold.
En annen måte å implementere uendelig rulling i React er via dens innebygde funksjoner. En slik funksjon er «componentDidMount», som React kaller når den først monterer en komponent.
Du kan bruke denne funksjonen til å laste den første batchen med data, etterfulgt av «componentDidUpdate»-funksjonen for å laste etterfølgende data mens brukeren ruller nedover.
Du kan også bruke React-kroker for å legge til en uendelig rullefunksjon.
Det er noen få måter å bruke react-infinite-scroll-komponenten på.
Innholdsfortegnelse
Installer react-infinite-scroll-komponent
For å kickstarte bruken, må du først installere den via npm:
npm install react-infinite-scroll-component --save
Importer react-infinite-scroll-komponent til React
Etter installasjonen må du importere det uendelige rullebiblioteket til React-komponenten.
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
Denne koden starter med å importere React og InfiniteScroll-komponenten fra react-infinite-scroll-component-biblioteket. Deretter oppretter den en tilstandsfull komponent og initialiserer den med en tom elementarray og et hasMore-flagg satt til True.
Angi parametere
I livssyklusmetoden componentDidMount må du kalle fetchData-metoden med en sideparameter satt til 1. FetchData-metoden foretar et API-kall for å hente data. Dette react-infinite-scroller-eksemplet genererer noen dummy-data og lager en rekke med 100 elementer.
Når sideparameteren når 100, siden det ikke finnes flere elementer, kan du sette hasMore-flagget til False. Dette stopper 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. Følgende prop er satt til fetchData-metoden. hasMore-rekvisitten settes lik 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.
Du kan sende andre rekvisitter til InfiniteScroll-komponenten, men dette er de du vil bruke oftest.
Bruke innebygde funksjoner
React har også noen innebygde metoder som du kan bruke for å implementere InfiniteScroll.
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. Hvis ja, laster den inn mer data.
Den andre metoden er scroll, som React kaller når brukeren ruller. Du kan bruke denne metoden til å holde styr på rulleposisjonen. Du kan laste inn flere data hvis brukeren har scrollet til bunnen av siden.
Her er et React infinite scroll-eksempel som viser deg hvordan du bruker disse metodene:
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
Denne koden bruker useState og useEffect-krokene for å håndtere tilstand og bivirkninger.
Innenfor useEffect-kroken kaller den opp fetchData-metoden med gjeldende side. FetchData-metoden foretar et API-kall for å hente 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, setter den hasMore-flagget til False. Dette stopper den uendelige rulle-komponenten fra å foreta flere API-kall.
Til slutt setter du tilstanden med de nye dataene.
OnScroll-metoden holder styr på rulleposisjonen. Du kan laste inn mer data hvis brukeren ruller til bunnen av siden.
UseEffect-kroken legger til en hendelseslytter for rullehendelsen. Når scroll-hendelsen utløses, kaller den onScroll-metoden.
Det er fordeler og ulemper ved å bruke Reacts uendelige rulle. Det forbedrer 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 opp fordeler og ulemper med uendelig rulleteknikk før du implementerer den på nettstedet eller appen din.
Å legge til uendelig rulling til React.js-nettstedet eller appen din kan forbedre brukeropplevelsen. Med uendelig rulling trenger ikke brukere å klikke for å se mer innhold. Å bruke Infinite Scroll i React.js-appen din kan redusere antall sideinnlastinger, noe som forbedrer ytelsen ytterligere.
Du kan også enkelt distribuere React-appen din til Github-sider gratis.