Har du nogensinde stødt på et websted eller en app, der indlæser og viser mere indhold, mens du ruller? Det er det, vi kalder uendelig rulle.
Infinite scroll er en populær teknik, der kan gøre det nemmere at gennemse store mængder indhold. Det kan også give en mere jævn brugeroplevelse, især på mobile enheder.
Du kan implementere uendelig scroll i React på et par forskellige måder. Den første er at bruge et bibliotek som react-infinite-scroll-component. Dette biblioteks komponent udløser en hændelse, når brugeren ruller til bunden af siden. Du kan derefter bruge denne begivenhed som en cue for at indlæse mere indhold.
En anden måde at implementere uendelig scroll i React er via dens indbyggede funktioner. En sådan funktion er “componentDidMount”, som React kalder, når den først monterer en komponent.
Du kan bruge denne funktion til at indlæse den første batch af data, efterfulgt af funktionen “componentDidUpdate” til at indlæse efterfølgende data, mens brugeren ruller ned.
Du kan også bruge React hooks til at tilføje en uendelig rullefunktion.
Der er et par måder at bruge react-infinite-scroll-komponenten på.
Indholdsfortegnelse
Installer react-infinite-scroll-komponent
For at kickstarte brugen skal du først installere den via npm:
npm install react-infinite-scroll-component --save
Importer react-infinite-scroll-komponent til React
Efter installationen skal du importere det uendelige rullebibliotek til din React-komponent.
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 kode starter med at importere React og InfiniteScroll-komponenten fra react-infinite-scroll-component-biblioteket. Den opretter derefter en tilstandsfuld komponent og initialiserer den med en tom array og et hasMore-flag sat til True.
Indstil parametre
I livscyklusmetoden componentDidMount skal du kalde metoden fetchData med en sideparameter sat til 1. Metoden fetchData foretager et API-kald for at hente data. Dette react-infinite-scroller-eksempel genererer nogle dummy-data og opretter en række af 100 elementer.
Når sideparameteren når 100, da der ikke findes flere elementer, kan du indstille flaget hasMore til False. Dette forhindrer 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. Følgende prop er indstillet til fetchData-metoden. hasMore prop er sat lig med 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.
Du kan videregive andre rekvisitter 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 InfiniteScroll.
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. Hvis ja, indlæser den flere data.
Den anden metode er scroll, som React kalder, når brugeren scroller. Du kan bruge denne metode til at holde styr på rullepositionen. Du kan indlæse flere data, hvis brugeren har scrollet til bunden af siden.
Her er et React infinite scroll-eksempel, der viser dig, hvordan du bruger disse metoder:
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 kode bruger useState og useEffect hooks til at administrere tilstand og bivirkninger.
Indenfor useEffect-krogen kalder den fetchData-metoden med den aktuelle side. Metoden fetchData foretager et API-kald for at hente 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, sætter den hasMore-flaget til False. Dette forhindrer den uendelige rulle-komponent i at foretage yderligere API-kald.
Indstil til sidst tilstanden med de nye data.
OnScroll-metoden holder styr på rullepositionen. Du kan indlæse flere data, hvis brugeren ruller til sidens bund.
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 Reacts uendelige rulle. Det forbedrer 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 ved teknikken med uendelig scroll, før du implementerer den på din hjemmeside eller app.
Tilføjelse af uendelig scroll til dit React.js-websted eller -app kan 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 reducere antallet af sideindlæsninger, hvilket forbedrer ydeevnen yderligere.
Du kan også nemt implementere din React-app til Github-sider gratis.
