Utforsk Uendelig Rulling i React
Har du noen gang opplevd at en nettside eller applikasjon automatisk laster mer innhold mens du scroller nedover? Dette fenomenet kalles uendelig rulling, en teknikk som gir en mer sømløs og kontinuerlig brukeropplevelse.
Uendelig rulling er en populær metode som forenkler navigeringen gjennom store mengder informasjon. Denne tilnærmingen er spesielt gunstig for mobile enheter, hvor den bidrar til en jevnere og mer engasjerende opplevelse.
I React kan uendelig rulling implementeres på forskjellige måter. En av metodene er å benytte seg av eksterne biblioteker, slik som react-infinite-scroll-component. Dette biblioteket reagerer på brukerens scroll-aktivitet og gir beskjed når bunnen av siden nås, noe som trigger innlasting av mer innhold.
En annen tilnærming er å bruke Reacts egne funksjoner. For eksempel kan componentDidMount benyttes til å laste den første datamengden når komponenten monteres. Deretter kan componentDidUpdate sørge for at ytterligere data lastes inn etter hvert som brukeren scroller ned.
Alternativt kan man også bruke React Hooks for å implementere uendelig rulling.
La oss se nærmere på hvordan react-infinite-scroll-component kan brukes i praksis.
Installasjon av react-infinite-scroll-component
For å komme i gang må du først installere biblioteket via npm:
npm install react-infinite-scroll-component --save
Importering til React
Etter installasjonen må du importere komponenten til React-komponenten din:
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>Uendelig Rulling</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Laster...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Jippi! Du har sett alt!</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Dette eksemplet begynner med å importere React og InfiniteScroll-komponenten. Deretter opprettes en stateful komponent med en tom liste for elementer og en hasMore-variabel satt til true.
Konfigurasjon av Parametere
I componentDidMount-metoden kalles fetchData med parameteren 1. Denne metoden henter data, eller i dette tilfellet genererer en rekke med 100 dummy-elementer.
Når page når 100, endres hasMore til false for å stoppe ytterligere innlasting. Til slutt oppdateres tilstanden med de nye dataene.
I render-metoden brukes InfiniteScroll-komponenten med flere parametere. dataLength er satt til lengden på elementlisten, next er fetchData-metoden, og hasMore er lik hasMore-variabelen.
loader-parameteren viser en «Laster…» melding, og endMessage vises når alle dataene er lastet inn.
Disse er de mest vanlige parameterne for InfiniteScroll, men du kan benytte flere.
Bruke Innebygde Funksjoner
React har også flere innebygde metoder som kan brukes til å implementere uendelig rulling.
En av disse metodene er componentDidUpdate, som React kaller etter at en komponent er oppdatert. Her kan du sjekke om brukeren har rullet til bunnen av siden, og laste mer data ved behov.
En annen metode er scroll, som React kaller når brukeren scroller. Denne metoden kan brukes til å holde oversikt over scroll-posisjonen og laste mer data når bunnen av siden nærmes.
Her er et eksempel som demonstrerer bruken av 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 benytter useState og useEffect for å håndtere state og sideeffekter.
I useEffect-kroken kalles fetchData med gjeldende side. fetchData simulerer et API-kall og genererer 100 dummy-elementer.
Hvis page-parameteren er 100, settes hasMore til false for å stoppe videre datahenting.
Til slutt oppdateres state med de nye dataene.
onScroll-metoden følger med på scroll-posisjonen. Mer data lastes inn når bunnen av siden nærmes.
En useEffect-krok legger til en event listener for scroll-hendelsen, som kaller onScroll når den utløses.
Uendelig rulling i React har både fordeler og ulemper. Det gir et forbedret brukergrensesnitt med en jevnere opplevelse, spesielt for mobile brukere. Ulempen er at brukere kan gå glipp av innhold hvis de ikke scroller langt nok ned.
Det er viktig å vurdere disse fordelene og ulempene før du implementerer uendelig rulling på din nettside eller applikasjon.
Ved å legge til uendelig rulling til din React.js-applikasjon kan du forbedre brukeropplevelsen. Brukere slipper å klikke for å laste mer innhold. Det kan også redusere antall sideinnlastninger og dermed forbedre ytelsen.
Du kan også enkelt publisere din React-applikasjon på Github Pages helt gratis.