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 oändlig rullning.
Infinite scroll är en populär teknik som kan göra det lättare att bläddra i stora mängder innehåll. Det kan också ge en smidigare användarupplevelse, särskilt på mobila enheter.
Du kan implementera oändlig rullning i React på några olika sätt. Den första är att använda ett bibliotek som react-infinite-scroll-component. Detta biblioteks komponent utlöser en händelse när användaren rullar till botten av sidan. Du kan sedan använda den här händelsen som en ledtråd för att ladda mer innehåll.
Ett annat sätt att implementera infinite scroll i React är via dess inbyggda funktioner. En sådan funktion är ”componentDidMount”, som React anropar när den först monterar en komponent.
Du kan använda den här funktionen för att ladda den första satsen data, följt av funktionen ”componentDidUpdate” för att ladda efterföljande data när användaren rullar nedåt.
Du kan också använda React-krokar för att lägga till en oändlig rullningsfunktion.
Det finns några sätt att använda react-infinite-scroll-komponenten.
Innehållsförteckning
Installera react-infinite-scroll-komponent
För att kickstarta användningen måste du först installera den via npm:
npm install react-infinite-scroll-component --save
Importera react-infinite-scroll-komponent till React
Efter installationen måste du importera infinite scroll-biblioteket till 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
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 den med en tom objektmatris och en hasMore-flagga inställd på True.
Ställ in parametrar
I livscykelmetoden componentDidMount måste du anropa metoden fetchData med en sidparameter inställd på 1. Metoden fetchData gör ett API-anrop för att hämta data. Det här exemplet med react-infinite-scroller genererar lite dummydata och skapar en array med 100 objekt.
När sidparametern når 100, eftersom inga fler objekt finns, kan du ställa in hasMore-flaggan till False. Detta stoppar 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. Följande rekvisita är inställt på metoden fetchData. hasMore-propellen sätts lika med 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.
Du kan skicka andra rekvisita till InfiniteScroll-komponenten, men det är dessa du kommer att använda oftast.
Använda inbyggda funktioner
React har även några inbyggda metoder som du kan använda för att implementera InfiniteScroll.
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. Om ja, den laddar mer data.
Den andra metoden är scroll, som React anropar när användaren scrollar. Du kan använda den här metoden för att hålla reda på rullningspositionen. Du kan ladda mer data om användaren har scrollat till botten av sidan.
Här är ett exempel på React infinite scroll som visar hur du använder dessa 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
Den här koden använder hakarna useState och useEffect för att hantera tillstånd och biverkningar.
Inom useEffect-kroken anropar den fetchData-metoden med den aktuella sidan. Metoden fetchData gör ett API-anrop för att hämta 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 sätter den hasMore-flaggan till False. Detta stoppar den oändliga rullningskomponenten 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. Du kan ladda mer data om användaren rullar till sidans botten.
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 Reacts oändliga rullning. Det förbättrar 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 upp fördelarna och nackdelarna med tekniken för oändlig rullning innan du implementerar den på din webbplats eller app.
Att lägga till oändlig rullning på din React.js-webbplats eller app kan 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 minska antalet sidladdningar, vilket ytterligare förbättrar prestandan.
Du kan också enkelt distribuera din React-app till Github-sidor gratis.
