Oneindig scrollen toevoegen in React.js

Ben je ooit een website of app tegengekomen die meer inhoud laadt en weergeeft als je scrolt? Dit noemen we oneindig scrollen.

Oneindig scrollen is een steeds meer gebruikte methode die het doornemen van grote hoeveelheden gegevens kan vergemakkelijken en de algehele gebruikerservaring kan verbeteren, met name op draagbare gadgets.

Oneindig scrollen implementeren in React.js

Er zijn verschillende methoden beschikbaar voor het implementeren van oneindig scrollen in een React-applicatie. Een van die methoden is het gebruik van een bibliotheek met de naam react-infinite-scroll-component . De component van deze specifieke bibliotheek controleert het scrollgedrag van de gebruiker en stuurt een event uit wanneer ze het einde van de pagina bereiken. Door gebruik te maken van deze gebeurtenis kun je vervolgens het laden van extra inhoud starten.

Om oneindig scrollen toe te passen in een React-toepassing, kun je gebruikmaken van de inherente functies van het framework. Een van deze functies is de methode “componentDidMount”, die React activeert bij het initialiseren van een component.

Je kunt deze functionaliteit gebruiken om een eerste set gegevens te laden en vervolgens de methode “componentDidUpdate” gebruiken om aanvullende informatie op te halen als de gebruiker verder naar beneden scrollt op de pagina.

React Hooks kunnen worden gebruikt om een functie voor oneindig scrollen in uw toepassing te implementeren, waardoor een naadloze gebruikerservaring wordt geboden terwijl de inhoud zonder onderbreking wordt geladen.

De bibliotheek react-infinite-scroll-component gebruiken

Er kunnen verschillende benaderingen worden toegepast bij het gebruik van het React Infinite Scroll Component.

Installeer react-infinite-scroll-component

Om het gebruik te starten, bestaat de eerste stap uit het installeren via de Node Package Manager (npm).

 npm install react-infinite-scroll-component --save 

Importeer react-infinite-scroll-component in React

Na de montage is het noodzakelijk om de infinite scroll-bibliotheek in uw React-element op te nemen.

 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

De code importeert zowel React als de InfiniteScroll-component uit de bibliotheek react-infinite-scroll-component en creëert vervolgens een stateful component. De initiële status van de component bestaat uit een lege “items”-array en een “hasMore”-vlag die is ingesteld op waar.

Parameters instellen

In de componentDidMount levenscyclusmethode is het noodzakelijk om de functie fetchData aan te roepen met een pagina parameter ingesteld op 1 . De fetchData procedure voert een API-verzoek uit om gegevens op te halen.Deze React-instantie voor oneindig scrollen produceert fictieve gegevens en bouwt een array met honderd elementen.

Bij het bereiken van een waarde van honderd voor de paginaparameter, wat aangeeft dat er geen extra items beschikbaar zijn, is het verstandig om de vlag “hasMore” te configureren als false, waardoor verdere aanroepen van de InfiniteScroll-component worden uitgesloten. Vervolgens is het bijwerken van de status met de nieuw verworven dataset een effectieve manier van handelen.

De methode render maakt gebruik van de component InfiniteScroll door bepaalde eigenschappen als argumenten te geven. Meer bepaald wordt aan de eigenschap dataLength een waarde toegekend die gelijk is aan de lengte van de array items . Daarnaast dient de fetchData functie als een andere verschafte eigenschap. Ten slotte wordt de eigenschap hasMore ingesteld op de waarde van de vlag hasMore .

De loader-eigenschap werkt door de inhoud van de component te presenteren als een laadindicatie. Op dezelfde manier wordt na voltooiing van het laden van alle gegevens de eigenschap endMessage weergegeven als een bericht binnen de component.

Wanneer je de InfiniteScroll component gebruikt, is het gebruikelijk om bepaalde props te gebruiken die vaak worden gebruikt. Er kunnen echter ook extra props worden geleverd als dat nodig is.

Ingebouwde functies gebruiken

React biedt een reeks inherente functies die de implementatie van InfiniteScroll mogelijk maken door gebruik te maken van de ingebouwde methoden.

De componentDidUpdate levenscyclusmethode in React wordt aangeroepen door het framework na een update van een component. Met deze gebeurtenisgestuurde aanpak kunnen ontwikkelaars aangepaste logica implementeren om te detecteren wanneer nieuwe gegevens moeten worden opgehaald op basis van de scrollpositie van de gebruiker. In wezen dient de methode als een mechanisme om te bepalen of extra inhoud moet worden geladen onder de huidige viewport drempel wanneer wordt gedetecteerd dat de gebruiker het einde van het zichtbare deel van de pagina heeft bereikt.

React biedt een ingebouwd mechanisme met de naam scroll , dat wordt geactiveerd door de scrollactie van de gebruiker, waardoor ontwikkelaars de huidige scrollpositie binnen hun applicatie kunnen bewaken en bijhouden. Deze gebeurtenisgestuurde benadering maakt het dynamisch laden van extra inhoud mogelijk wanneer de gebruiker de onderkant van het zichtbare paginabereik bereikt, waardoor een optimale browse-ervaring wordt gegarandeerd.

De meegeleverde code demonstreert een voorbeeld van het gebruik van de bovengenoemde technieken binnen de context van een React-applicatie, specifiek met betrekking tot het implementeren van een oneindige scroll-functionaliteit.

 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 

Deze code maakt gebruik van zowel de useState als de useEffect hooks om het beheer van de status te vergemakkelijken en gewenste neveneffecten in de applicatie te implementeren.

Binnen het bereik van de haak useEffect roept de huidige iteratie van de functie de methode fetchData op door de huidige status van de paginering als parameter door te geven. Deze methode voert vervolgens een HTTP-verzoek uit om informatie van een externe bron op te halen. Alleen ter illustratie simuleren we in dit geval het genereren van enkele hypothetische gegevens om het besproken concept te illustreren.

De for-lus voegt iteratief een reeks elementen toe aan de array newItems , waarbij de waarde stapsgewijs wordt verhoogd tot honderd. Tegelijkertijd, als de vooraf bepaalde waarde van de parameter page de honderd overschrijdt, wordt de booleaanse variabele hasMore ingesteld op false, waardoor alle extra aanvragen door het oneindige scrollmechanisme worden gestopt.

Stel ten slotte de huidige status vast op basis van de bijgewerkte informatie.

De methode onScroll houdt de huidige scrollpositie bij en laadt bij het bereiken van de onderkant van de pagina dynamisch extra inhoud of gegevens in reactie op verdere gebruikersinteractie met de interface.

Het gebruik van de haak useEffect vergemakkelijkt de toevoeging van een luisteraar voor de scrollgebeurtenis. Als reactie op het optreden van deze gebeurtenis wordt de methode onScroll aangeroepen.

De voor- en nadelen van oneindig scrollen in React

React’s implementatie van oneindig scrollen heeft zowel voor- als nadelen. Aan de ene kant verbetert deze functie de algemene gebruikersinterface door een naadloze navigatie-ervaring te bieden, vooral op mobiele platformen waar de schermruimte beperkt is. Aan de andere kant bestaat het potentiële risico dat gebruikers inhoud over het hoofd zien die zich buiten hun aanvankelijke gezichtspunt bevindt, omdat ze mogelijk niet voldoende hebben gescrold om alle items te bekijken.

Het is cruciaal om zorgvuldig de voor- en nadelen te evalueren van het gebruik van een oneindige scrolltechniek in webdesign, omdat deze aanpak aanzienlijke gevolgen kan hebben voor de gebruikerservaring en de betrokkenheid.

Verbeter de gebruikerservaring met oneindig scrollen in React.js

Het opnemen van een oneindig scrollmechanisme in een React.js-applicatie kan de algehele gebruikerservaring verbeteren doordat er niet meer extra hoeft te worden geklikt om toegang te krijgen tot meer inhoud. Deze benadering heeft ook het potentieel om het totale aantal paginaverzoeken te verminderen, waardoor de efficiëntie en prestaties van de app toenemen.

Het implementeren van een React-applicatie op GitHub Pages is een eenvoudig proces dat geen geldelijke investering vereist.