Hoe oneindig scrollen toe te voegen in React.js

Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.

Ben je ooit een website of app tegengekomen die meer inhoud laadt en weergeeft terwijl je scrolt? Dit noemen we een oneindige scroll.

Oneindig scrollen is een populaire techniek die het aantal paginaladingen vermindert. Het kan ook zorgen voor een soepelere gebruikerservaring, vooral op mobiele apparaten.

Er zijn een paar verschillende manieren waarop u oneindig scrollen in React.js kunt implementeren. Een manier is om een ​​bibliotheek zoals reageren-oneindige-scroll-component te gebruiken. Deze bibliotheek biedt een component die een gebeurtenis activeert wanneer de gebruiker naar de onderkant van de pagina scrolt. U kunt deze gebeurtenis vervolgens gebruiken om meer inhoud te laden.

Een andere manier om oneindig scrollen te implementeren, is door de ingebouwde functies te gebruiken die React biedt. Een van die functies is "componentDidMount" die React aanroept wanneer een component voor het eerst wordt aangekoppeld.

U kunt deze functie gebruiken om de eerste batch gegevens te laden en vervolgens de functie "componentDidUpdate" gebruiken om meer gegevens te laden wanneer de gebruiker naar beneden scrolt. Je kan ook gebruik React-hooks om een ​​oneindige scrollfunctie toe te voegen.

Om react-infinite-scroll-component te gebruiken, moet je het eerst installeren met behulp van npm:

npm installeren reageer-oneindig-rol-component --redden

Vervolgens kunt u het importeren in uw React-component.

importeren Reageer van 'Reageer'
importeren Oneindige scroll van 'reageer-oneindige-scroll-component'
klasappstrekt zich uitReageer.Onderdeel{
constructeur() {
super()
dit.staat = {
artikelen: [],
 heeft meer: WAAR
 }
 }
componentDidMount() {
dit.fetchData(1)
 }
fetchData = (pagina) => {
const nieuweItems = []
voor (laten ik = 0; ik < 100; ik++) {
nieuwe items.duw(i )
 }
als (pagina 100) {
dit.setState({ heeft meer: onwaar })
 }
dit.setState({ artikelen: [...deze.staat.items, ...nieuweItems] })
 }
veroorzaken() {
opbrengst (
<div>
<h1>Oneindige scroll</h1>
<Oneindige scroll
 dataLength={dit.state.items.length}
 volgende={dit.fetchData}
 heeftMeer={dit.state.hasMeer}
 lader={<h4>Bezig met laden...</h4>}
 eindbericht={
<p stijl={{ textAlign: 'centrum' }}>
<B>Hoera! Je hebt het allemaal gezien</B>
</P>
 }
>
 {dit.state.items.map((item, index) => (
<div-sleutel={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exporterenstandaard app

Deze code begint met het importeren van React en de InfiniteScroll-component uit de react-infinite-scroll-component-bibliotheek. Vervolgens wordt een stateful component gemaakt en wordt de status geïnitialiseerd met een lege artikelen array en een heeft meer vlag ingesteld op waar.

In de levenscyclusmethode componentDidMount roept u de gegevens ophalen methode met een bladzijde parameter van 1. De methode fetchData doet een API-aanroep om bepaalde gegevens op te halen. Dit voorbeeld genereert slechts enkele dummygegevens. Vervolgens wordt een array van 100 items gemaakt.

Als de paginaparameter 100 is, zijn er geen items meer, dus stel de hasMore-vlag in op false. Dit voorkomt dat de InfiniteScroll-component verdere API-aanroepen doet. Stel ten slotte de status in met behulp van de nieuwe gegevens.

De rendermethode gebruikt de InfiniteScroll-component en geeft sommige rekwisieten door. De dataLength-prop wordt ingesteld op de lengte van de items-array. De volgende prop is ingesteld op de methode fetchData. De hasMore-prop is ingesteld op de hasMore-vlag. De ladersteun zorgt ervoor dat de component zijn inhoud weergeeft als een laadindicator. Op dezelfde manier wordt de endMessage-prop weergegeven als een bericht wanneer alle gegevens zijn geladen.

Er zijn ook andere rekwisieten die u kunt doorgeven aan de InfiniteScroll-component, maar dit zijn degenen die u het vaakst zult gebruiken.

Ingebouwde functies gebruiken

React heeft ook enkele ingebouwde methoden die u kunt gebruiken om oneindig scrollen te implementeren.

De eerste methode is componentDidUpdate. React roept deze methode aan nadat het een component heeft bijgewerkt. U kunt deze methode gebruiken om te controleren of de gebruiker naar de onderkant van de pagina is gescrold en zo ja, meer gegevens laden.

De tweede methode is rol, die React roept wanneer de gebruiker scrolt. U kunt deze methode gebruiken om de schuifpositie bij te houden. Als de gebruiker naar de onderkant van de pagina is gescrolld, kunt u meer gegevens laden.

Hier is een voorbeeld van hoe u deze methoden kunt gebruiken om oneindig scrollen te implementeren:

importeren Reageren, {useState, useEffect} van 'Reageer'
functieapp() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(WAAR)
const [pagina, setPage] = useState(1)
gebruikEffect(() => {
 fetchData (pagina)
 }, [bladzijde])
const fetchData = (pagina) => {
const nieuweItems = []
voor (laten ik = 0; ik < 100; ik++) {
nieuwe items.duw(i)
 }
als (pagina 100) {
 setHeeftMeer(vals)
 }
setItems([...artikelen, ...nieuwe artikelen])
 }
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const cliëntHoogte = document.documentElement.clientHeight
als (scrollTop + clientHeight >= scrollHoogte) {
 setPagina (pagina + 1)
 }
 }
gebruikEffect(() => {
 venster.addEventListener('rol', opScroll)
 terug () => venster.removeEventListener('rol', opScroll)
 }, [items])
opbrengst (
<div>
 {items.map((item, index) => (
<div-sleutel={index}>
 {item}
</div>
 ))}
</div>
 )
}
exporterenstandaard app

Deze code gebruikt de hooks useState en useEffect om status en bijwerkingen te beheren.

In de useEffect hook roept het de fetchData methode aan met de huidige pagina. De methode fetchData doet een API-aanroep om bepaalde gegevens op te halen. In dit voorbeeld genereert u alleen wat dummygegevens om de techniek te demonstreren.

De lus for vult de array newItems met 100 gehele getallen. Als de paginaparameter 100 is, stelt u de vlag hasMore in op false. Dit voorkomt dat de InfiniteScroll-component verdere API-aanroepen doet. Stel ten slotte de status in met de nieuwe gegevens.

De onScroll methode houdt de scrollpositie bij. Als de gebruiker naar de onderkant van de pagina is gescrolld, kunt u meer gegevens laden.

De useEffect hook voegt een gebeurtenislistener toe voor de scrollgebeurtenis. Wanneer de scroll-gebeurtenis wordt geactiveerd, wordt de onScroll-methode aangeroepen.

Er zijn voor- en nadelen aan het gebruik van oneindig scrollen. Het kan helpen om de gebruikersinterface te verbeteren, wat zorgt voor een soepelere ervaring, vooral op mobiele apparaten. Het kan er echter ook toe leiden dat gebruikers inhoud missen, omdat ze mogelijk niet ver genoeg naar beneden scrollen om het te zien.

Het is belangrijk om de voor- en nadelen af ​​te wegen van de oneindige scroll-techniek voordat u het op uw website of app implementeert.

Het toevoegen van oneindig scrollen aan uw React.js-website of -app kan helpen om de gebruikerservaring te verbeteren. Met oneindig scrollen hoeven gebruikers niet te klikken om meer inhoud te zien. Het gebruik van Infinite Scroll in uw React.js-app kan ook helpen om het aantal paginaladingen te verminderen, wat de prestaties kan verbeteren.

U kunt uw React-app ook eenvoudig gratis op Github-pagina's implementeren.