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 görgetésnek.
A végtelen görgetés egy népszerű technika, amely megkönnyíti a nagy mennyiségű tartalom böngészését. Simább felhasználói élményt is biztosíthat, különösen mobileszközökön.
A végtelen görgetést a React alkalmazásban többféleképpen is megvalósíthatja. Az első egy olyan könyvtár használata, mint a react-infinite-scroll-component. Ennek a könyvtárnak az összetevője eseményt indít el, amikor a felhasználó az oldal aljára görget. Ezt az eseményt ezután jelzésként használhatja további tartalom betöltéséhez.
A végtelen görgetés megvalósításának másik módja a Reactban a beépített funkciói. Az egyik ilyen funkció a „componentDidMount”, amelyet a React hív meg, amikor először csatlakoztat egy összetevőt.
Használhatja ezt a funkciót az első adatköteg betöltésére, majd a „componentDidUpdate” függvényt a következő adatok betöltésére, miközben a felhasználó lefelé görget.
A React hook segítségével végtelen görgetési funkciót is hozzáadhat.
Számos módja van a react-infinite-scroll-komponens használatának.
Tartalomjegyzék
Telepítse a react-infinite-scroll-komponenst
A használat elindításához először telepítenie kell az npm-en keresztül:
npm install react-infinite-scroll-component --save
Importálja a react-infinite-scroll-komponenst a React alkalmazásba
A telepítés után importálnia kell a végtelen görgetőkönyvtárat a React összetevőbe.
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
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 azt egy üres elemtömbbel, valamint a True értékre állított hasMore jelzővel.
Paraméterek beállítása
A componentDidMount életciklus metódusban meg kell hívnia a fetchData metódust 1-es oldalparaméterrel. A fetchData metódus API-hívást hajt végre az adatok lekéréséhez. Ez a react-infinite-scroller példa létrehoz néhány ál adatot, és létrehoz egy 100 elemből álló tömböt.
Ha az oldalparaméter eléri a 100-at, mivel nincs több elem, a hasMore jelzőt False értékre állíthatja. Ez megakadályozza, hogy az InfiniteScroll összetevő 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ő prop a fetchData metódusra van beállítva. A hasMore beállítás egyenlő a hasMore jelzővel.
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.
Más kellékeket is átadhat az InfiniteScroll komponensnek, de ezeket a leggyakrabban használja.
Beépített funkciók használata
A React rendelkezik néhány beépített módszerrel is, amelyek segítségével megvalósíthatja az InfiniteScrollt.
Az első módszer a componentDidUpdate. A React meghívja ezt a metódust, miután frissít egy összetevőt. Ezzel a módszerrel ellenőrizheti, hogy a felhasználó az oldal aljára görgett-e. Ha igen, akkor több adatot tölt be.
A második módszer a scroll, 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. Több adatot tölthet be, ha a felhasználó az oldal aljára görgett.
Íme egy példa a React végtelen görgetésre, amely bemutatja az alábbi módszerek használatát:
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
Ez a kód a useState és a useEffect hook segítségével kezeli az állapotot és a mellékhatásokat.
A useEffect hookon belül meghívja a fetchData metódust az aktuális oldallal. A fetchData metódus API-hívást indít az adatok lekéré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, akkor a hasMore jelzőt False értékre állítja. Ez megakadályozza, hogy a végtelen görgetési komponens 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. Több adatot tölthet be, ha a felhasználó az oldal aljára görget.
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 React végtelen görgetésének előnyei és hátrányai is vannak. Javítja a felhasználói felületet, simább élményt biztosítva, 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.
Alapvető fontosságú, hogy mérlegelje a végtelen görgetés technikájának előnyeit és hátrányait, 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 javíthatja a felhasználói élményt. 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 csökkentheti az oldalbetöltések számát, ami tovább javítja a teljesítményt.
A React alkalmazást egyszerűen és ingyenesen telepítheti a Github oldalakra is.
