Narazili jste někdy na web nebo aplikaci, která načítá a zobrazuje více obsahu, když se posouváte? Tomu říkáme nekonečný svitek.
Nekonečné posouvání je oblíbená technika, která může usnadnit procházení velkého množství obsahu. Může také zajistit hladší uživatelský zážitek, zejména na mobilních zařízeních.
Nekonečné posouvání můžete v Reactu implementovat několika různými způsoby. Prvním z nich je použití knihovny, jako je reakční-nekonečná-scroll-komponenta. Komponenta této knihovny spouští událost, kdykoli se uživatel posune na konec stránky. Tuto událost pak můžete použít jako vodítko k načtení dalšího obsahu.
Dalším způsobem, jak implementovat nekonečné posouvání v Reactu, jsou jeho vestavěné funkce. Jednou z takových funkcí je „componentDidMount“, kterou React volá při prvním připojení komponenty.
Tuto funkci můžete použít k načtení první dávky dat, po které následuje funkce „componentDidUpdate“ k načtení dalších dat, když uživatel posouvá dolů.
Můžete také použít háčky React k přidání funkce nekonečného posouvání.
Existuje několik způsobů, jak použít komponentu reagovat-infinite-scroll-.
Table of Contents
Nainstalujte komponentu reagovat-nekonečného posouvání
Chcete-li začít používat, musíte jej nejprve nainstalovat pomocí npm:
npm install react-infinite-scroll-component --save
Importujte komponentu React-infinite-Scroll do React
Po instalaci musíte do komponenty React importovat knihovnu nekonečného posuvníku.
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
Tento kód začíná importem React a komponenty InfiniteScroll z knihovny komponent React-infinite-scroll-component. Poté vytvoří stavovou komponentu a inicializuje ji s prázdným polem položek a příznakem hasMore nastaveným na hodnotu True.
Nastavit parametry
V metodě životního cyklu componentDidMount musíte volat metodu fetchData s parametrem stránky nastaveným na 1. Metoda fetchData zavolá API pro načtení dat. Tento příklad nekonečna scrolleru generuje nějaká fiktivní data a vytváří pole 100 položek.
Jakmile parametr stránky dosáhne hodnoty 100, protože neexistují žádné další položky, můžete nastavit příznak hasMore na False. To zabrání komponentě InfiniteScroll v provádění dalších volání API. Nakonec nastavte stav pomocí nových dat.
Metoda vykreslování používá komponentu InfiniteScroll a předává některé rekvizity. Prop dataLength je nastaven na délku pole položek. Následující prop je nastavena na metodu fetchData. Prop hasMore je nastaven na stejnou hodnotu jako příznak hasMore.
Podpěra zavaděče způsobí, že komponenta vykreslí svůj obsah jako indikátor načítání. Podobně vykreslí prop endMessage jako zprávu, když se všechna data načítají.
Komponentě InfiniteScroll můžete předat další rekvizity, ale tyto budete používat nejčastěji.
Použití vestavěných funkcí
React má také některé vestavěné metody, které můžete použít k implementaci InfiniteScroll.
První metodou je componentDidUpdate. React volá tuto metodu poté, co aktualizuje komponentu. Tuto metodu můžete použít ke kontrole, zda se uživatel posunul na konec stránky. Pokud ano, načte více dat.
Druhou metodou je scroll, který React volá, když uživatel roluje. Tuto metodu můžete použít ke sledování polohy posouvání. Pokud uživatel přešel na konec stránky, můžete načíst další data.
Zde je příklad nekonečného posouvání React, který ukazuje, jak používat tyto metody:
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
Tento kód používá háčky useState a useEffect ke správě stavu a vedlejších účinků.
V rámci háku useEffect volá metodu fetchData s aktuální stránkou. Metoda fetchData provede volání API pro načtení dat. V tomto příkladu pouze generujete nějaká fiktivní data pro demonstraci techniky.
Cyklus for naplní pole newItems 100 celými čísly. Pokud je parametr page 100, nastaví příznak hasMore na False. To zastaví komponentu nekonečného posouvání v provádění dalších volání API.
Nakonec nastavte stav s novými daty.
Metoda onScroll sleduje pozici posouvání. Pokud uživatel přejde na konec stránky, můžete načíst více dat.
Háček useEffect přidá posluchač události pro událost posouvání. Když se událost scroll spustí, zavolá metodu onScroll.
Používání nekonečného svitku Reactu má své klady i zápory. Vylepšuje uživatelské rozhraní a zajišťuje plynulejší zážitek, zejména na mobilních zařízeních. Může to však také vést k tomu, že uživatelům chybí obsah, protože se nemusí posouvat dolů dostatečně daleko, aby jej viděli.
Před implementací techniky nekonečného posouvání na svůj web nebo aplikaci je nezbytné zvážit klady a zápory.
Přidání nekonečného posouvání na web nebo aplikaci React.js může zlepšit uživatelský dojem. Díky nekonečnému posouvání uživatelé nemusí klikat, aby viděli další obsah. Použití Infinite Scroll v aplikaci React.js může snížit počet načítání stránek, což dále zlepšuje výkon.
Svou aplikaci React můžete také snadno zdarma nasadit na stránky Github.