Hur man lägger till Infinite Scroll i React.js

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.