Oändlig scroll i React: En djupdykning
Har du någonsin surfat på en hemsida eller i en app där nytt innehåll dyker upp allt eftersom du scrollar nedåt? Det fenomenet kallar vi oändlig scroll.
Oändlig scroll är en populär metod som förenklar navigeringen genom stora mängder data. Den kan dessutom ge en mer följsam användarupplevelse, i synnerhet på mobila enheter.
I React finns det olika vägar att implementera oändlig scroll. Ett vanligt tillvägagångssätt är att använda ett bibliotek som react-infinite-scroll-component
. Denna komponents roll är att aktivera en händelse när användaren når botten av sidan, en signal för att ladda in mer innehåll.
Ett annat sätt att skapa oändlig scroll i React är genom dess inbyggda funktionalitet. En sådan funktion är componentDidMount
, som anropas av React när komponenten monteras för första gången.
Du kan använda componentDidMount
för att ladda den initiala datamängden. Sedan kan du använda componentDidUpdate
för att ladda in successiv data medan användaren scrollar neråt.
Det är även möjligt att använda React hooks för att integrera funktionen för oändlig scroll.
Låt oss undersöka några metoder för att använda react-infinite-scroll-component
.
Installation av react-infinite-scroll-component
För att komma igång behöver du installera biblioteket via npm:
npm install react-infinite-scroll-component --save
Importera react-infinite-scroll-komponenten
Efter installationen måste du importera biblioteket för oändlig scroll 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>Oändlig Scroll</h1> <InfiniteScroll dataLength={this.state.items.length} next={this.fetchData} hasMore={this.state.hasMore} loader={<h4>Laddar...</h4>} endMessage={ <p style={{ textAlign: 'center' }}> <b>Jippie! Du har sett allt</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 komponenten InfiniteScroll
från react-infinite-scroll-component
. En stateful komponent skapas, initialiserad med en tom array och en flagga (hasMore
) som är satt till true
.
Konfigurera parametrar
I livscykelmetoden componentDidMount
anropas fetchData
med sidparametern satt till 1. Metoden fetchData
simulerar ett API-anrop och hämtar data. I detta exempel skapas dummydata och en array med 100 objekt.
När sidparametern når 100, vilket markerar slutet på datan, sätts flaggan hasMore
till false
. Detta förhindrar InfiniteScroll
från att utföra ytterligare anrop. Slutligen uppdateras state med den nya informationen.
Render-metoden använder InfiniteScroll
-komponenten och skickar in olika egenskaper (props). dataLength
sätts till längden på arrayen. next
är kopplad till fetchData
-metoden. hasMore
tar värdet av den liknamniga flaggan.
loader
-egenskapen används för att visa en laddningsindikator. På samma sätt visas innehållet i endMessage
när all data är inläst.
Andra props kan också skickas till komponenten, men dessa är de vanligaste.
Använda inbyggda funktioner
React erbjuder även inbyggda metoder för att skapa oändlig scroll.
Den första metoden är componentDidUpdate
. React anropar denna metod efter att en komponent har uppdaterats. Med denna metod kan du kontrollera om användaren har nått botten av sidan, och i så fall ladda mer data.
Den andra metoden är scroll
, som React anropar när användaren scrollar. Genom den kan du hålla reda på rullningspositionen och ladda mer data när användaren har nått slutet av sidan.
Här följer ett exempel som demonstrerar hur du implementerar oändlig scroll i React med hjälp av 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
Denna kod använder React-hooks som useState
och useEffect
för att hantera tillstånd och sidoförändringar.
Inom useEffect
-kroken anropas fetchData
med den aktuella sidan. Funktionen simulerar ett API-anrop för att hämta data. I det här exemplet skapas bara dummydata för att visa tekniken.
En for-loop fyller newItems
-arrayen med 100 heltal. Om sidparametern är 100, sätts hasMore
-flaggan till false
, vilket förhindrar att den oändliga scrollfunktionen gör ytterligare anrop.
Slutligen uppdateras state med den nya datan.
onScroll
-metoden håller reda på scrollpositionen. Mer data laddas när användaren scrollar till slutet av sidan.
useEffect
-kroken lägger till en eventlyssnare för scroll
-eventet och anropar onScroll
-metoden när eventet triggas.
Det finns både fördelar och nackdelar med oändlig scroll i React. Det förbättrar användarupplevelsen genom att göra den smidigare, särskilt på mobila enheter. Men det kan också leda till att användare missar innehåll om de inte scrollar tillräckligt långt.
Det är därför viktigt att noggrant väga för- och nackdelar innan du bestämmer dig för att använda oändlig scroll på din webbplats eller app.
Att lägga till oändlig scroll i din React.js-app kan alltså förbättra användarupplevelsen. Med oändlig scroll behöver inte användare klicka för att se mer innehåll. Att använda oändlig scroll i en React.js-app kan minska antalet sidladdningar och förbättra prestandan.
Du kan dessutom enkelt publicera din React-app på GitHub Pages gratis.