Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

Találkoztál már olyan weboldallal vagy alkalmazással, amely görgetés közben több tartalmat tölt be és jelenít meg? Ezt nevezzük végtelen tekercsnek.

A végtelen görgetés egy népszerű technika, amely csökkenti az oldalbetöltések számát. Simább felhasználói élményt is biztosíthat, különösen mobileszközökön.

A React.js-ben többféleképpen is megvalósíthatja a végtelen görgetést. Az egyik módja egy olyan könyvtár használata, mint a react-infinite-scroll-component. Ez a könyvtár olyan összetevőt biztosít, amely eseményt indít el, amikor a felhasználó az oldal aljára görget. Ezt az eseményt ezután további tartalom betöltésére használhatja.

A végtelen görgetés megvalósításának másik módja a React által biztosított beépített funkciók használata. Az egyik ilyen funkció a „componentDidMount”, amelyet a React az összetevő első felcsatolásakor hív meg.

Ezzel a funkcióval betöltheti az első adatköteget, majd a „componentDidUpdate” funkcióval több adatot tölthet be, amikor a felhasználó lefelé görget. Te is

használjon React horgokat végtelen görgetési funkció hozzáadásához.

A react-infinite-scroll-component használatához először telepítenie kell az npm használatával:

npm telepítés végtelen reakciótekercs-összetevő --megment

Ezután importálhatja a React összetevőbe.

import Reagál tól től 'reagál'
import Végtelen görgetés tól től "react-infinite-scroll-component"
osztályAppkiterjedReagál.Összetevő{
konstruktőr() {
szuper()
ez.state = {
tételeket: [],
 van neki több: igaz
 }
 }


componentDidMount() {
ez.fetchData(1)
 }


fetchData = (oldal) => {
const newItems = []


számára (hagyja i = 0; én < 100; i++) {
uj tetelek.nyom(én )
 }


if (100. oldal) {
ez.setState({ van neki több: hamis })
 }


ez.setState({ tételeket: [...this.state.items, ...newItems] })
 }


Vakol() {
Visszatérés (
<div>
<h1>Végtelen görgetés</h1>
<Végtelen görgetés
 dataLength={ez.state.items.length}
 következő={ez.fetchData}
 hasMore={ez.state.hasMore}
 loader={<h4>Betöltés...</h4>}
 endMessage={
<p style={{ textAlign: 'központ' }}>
<b>Hurrá! Te mindent láttál</b>
</p>
 }
>
 {ez.state.items.map((elem, index) => (
<div kulcs={index}>
 {tétel}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exportalapértelmezett App

Ez a kód a React és az InfiniteScroll összetevő importálásával kezdődik a react-infinite-scroll-komponens könyvtárból. Ezután létrehoz egy állapottartó komponenst, és inicializálja az állapotot egy üres elemmel tételeket tömb és a van neki több zászló igazra állítva.

A componentDidMount életciklus metódusban meghívja a fetchData módszerrel a oldalon paramétere 1. A fetchData metódus API-hívást indít bizonyos adatok beszerzéséhez. Ez a példa csak néhány ál adatot generál. Ezután létrehoz egy 100 elemből álló tömböt.

Ha az oldalparaméter 100, akkor nincs több elem, ezért állítsa a hasMore jelzőt false értékre. Ez leállítja az InfiniteScroll összetevőt abban, hogy további API-hívásokat indítson. Végül állítsa be az állapotot az új adatok segítségével.

A renderelési módszer az InfiniteScroll komponenst használja, és átad néhány kelléket. A dataLength prop az elemek tömbjének hosszára van beállítva. A következő javaslat a fetchData metódusra van állítva. A hasMore kellék a hasMore jelzőre van állítva. A rakodótámasz hatására az alkatrész töltésjelzőként jeleníti meg a tartalmát. Hasonlóképpen az endMessage propot üzenetként jeleníti meg, amikor az összes adat betöltődött.

Vannak más kellékek is, amelyeket átadhat az InfiniteScroll összetevőnek, de ezeket használja a leggyakrabban.

Beépített funkciók használata

A React rendelkezik néhány beépített módszerrel is, amelyek segítségével végtelen görgetést valósíthat meg.

Az első módszer az komponentDidUpdate. A React meghívja ezt a metódust, miután frissített egy összetevőt. Ezzel a módszerrel ellenőrizheti, hogy a felhasználó az oldal aljára görgett-e, és ha igen, akkor több adatot tölthet be.

A második módszer az tekercs, amelyet a React hív meg, amikor a felhasználó görget. Ezzel a módszerrel nyomon követheti a görgetés pozícióját. Ha a felhasználó az oldal aljára görgett, akkor további adatokat tölthet be.

Íme egy példa arra, hogyan használhatja ezeket a módszereket a végtelen görgetés megvalósítására:

import React, {useState, useEffect} tól től 'reagál'
funkcióApp() {
const [elemek, setItems] = useState([])
const [hasMore, setHasMore] = useState(igaz)
const [oldal, setPage] = useState(1)


useEffect(() => {
 fetchData (oldal)
 }, [oldal])


const fetchData = (oldal) => {
const newItems = []


számára (hagyja i = 0; én < 100; i++) {
uj tetelek.nyom(én)
 }


if (100. oldal) {
 setHasMore(hamis)
 }


setItems([...elemek, ...új elemek])
 }


const onScroll = () => {
const scrollTop = dokumentum.documentElement.scrollTop
const scrollHeight = dokumentum.documentElement.scrollHeight
const ügyfélmagasság = dokumentum.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (oldal + 1)
 }
 }


useEffect(() => {
 window.addEventListener('tekercs', onScroll)
 visszatérés () => window.removeEventListener('tekercs', onScroll)
 }, [elemek])


Visszatérés (
<div>
 {items.map((elem, index) => (
<div kulcs={index}>
 {tétel}
</div>
 ))}
</div>
 )
}
exportalapértelmezett App

Ez a kód a useState és a useEffect hook segítségével kezeli az állapotot és a mellékhatásokat.

A useEffect hook-ban meghívja a fetchData metódust az aktuális oldallal. A fetchData metódus API-hívást indít bizonyos adatok beszerzéséhez. Ebben a példában csak néhány áladatot generál a technika bemutatására.

A for ciklus 100 egész számmal tölti fel a newItems tömböt. Ha az oldalparaméter 100, állítsa a hasMore jelzőt false értékre. Ez leállítja az InfiniteScroll összetevőt abban, hogy további API-hívásokat indítson. Végül állítsa be az állapotot az új adatokkal.

Az onScroll módszer nyomon követi a görgetés pozícióját. Ha a felhasználó az oldal aljára görgett, több adatot tölthet be.

A useEffect hook eseményfigyelőt ad hozzá a görgetési eseményhez. Amikor a scroll esemény elindul, meghívja az onScroll metódust.

A végtelen görgetés használatának előnyei és hátrányai is vannak. Segíthet javítani a felhasználói felületet, ami gördülékenyebb élményt biztosít, különösen mobileszközökön. Ez azonban azt is eredményezheti, hogy a felhasználók elveszítik a tartalmat, mivel előfordulhat, hogy nem görgetnek le eléggé ahhoz, hogy lássák.

Fontos mérlegelni az előnyöket és hátrányokat a végtelen görgetés technikájáról mielőtt implementálja webhelyén vagy alkalmazásában.

A végtelen görgetés hozzáadása a React.js webhelyhez vagy alkalmazáshoz segíthet a felhasználói élmény javításában. A végtelen görgetésnek köszönhetően a felhasználóknak nem kell kattintaniuk, hogy több tartalmat láthassanak. Az Infinite Scroll használata a React.js alkalmazásban szintén csökkentheti az oldalbetöltések számát, ami javíthatja a teljesítményt.

A React alkalmazást egyszerűen és ingyenesen telepítheti a Github oldalakra is.