Setkali jste se někdy s webem nebo aplikací, která průběžně načítá a zobrazuje další obsah, jakmile se posouváte dolů? Tento jev se nazývá nekonečné rolování.
Nekonečné rolování je populární technika, která usnadňuje procházení velkého objemu informací. Může také přispět k plynulejšímu uživatelskému zážitku, obzvláště na mobilních zařízeních.
V Reactu můžete nekonečné rolování implementovat několika způsoby. Jedním z nich je využití externí knihovny, například `react-infinite-scroll-component`. Tato knihovna generuje událost pokaždé, když uživatel dosáhne konce stránky. Tuto událost můžete využít jako signál pro načtení další dávky obsahu.
Alternativní přístup spočívá v použití vestavěných funkcí Reactu. Jednou z nich je metoda `componentDidMount`, kterou React volá při prvním připojení komponenty.
Tuto metodu můžete použít pro načtení prvotních dat, a následně metodu `componentDidUpdate` pro načítání dalších dat při posouvání stránky uživatelem.
K implementaci nekonečného rolování můžete také využít React hooks.
Existuje několik způsobů, jak pracovat s komponentou `react-infinite-scroll-component`.
Instalace komponenty react-infinite-scroll-component
Pro začátek je nutné komponentu nainstalovat pomocí npm:
npm install react-infinite-scroll-component --save
Import komponenty do Reactu
Po instalaci musíte importovat knihovnu pro nekonečné rolování do vaší React komponenty.
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>Nekonečné rolování</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Načítání...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Výborně! Zobrazili jste veškerý obsah</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Tento kód začíná importem knihovny React a komponenty `InfiniteScroll` z balíčku `react-infinite-scroll-component`. Následně je vytvořena stavová komponenta s prázdným polem položek a příznakem `hasMore` nastaveným na `true`.
Nastavení parametrů
V metodě životního cyklu `componentDidMount` se volá metoda `fetchData` s parametrem `page` nastaveným na 1. Metoda `fetchData` typicky slouží k načítání dat z API. V tomto příkladu se generují fiktivní data a vytváří se pole o 100 položkách.
Jakmile parametr `page` dosáhne hodnoty 100, protože další data nejsou k dispozici, příznak `hasMore` se nastaví na `false`. Tím se zabrání komponentě `InfiniteScroll` v dalším volání API. Nakonec se aktualizuje stav komponenty s novými daty.
Metoda `render` používá komponentu `InfiniteScroll` a předává jí několik parametrů. Vlastnost `dataLength` je nastavena na délku pole `items`. Vlastnost `next` je nastavena na metodu `fetchData`. A vlastnost `hasMore` odráží stav příznaku `hasMore`.
Vlastnost `loader` určuje, jaký obsah se zobrazí během načítání dat. Podobně, vlastnost `endMessage` zobrazí zprávu, jakmile se všechna data načtou.
Komponentě `InfiniteScroll` lze předat i další vlastnosti, ale tyto se používají nejčastěji.
Využití vestavěných funkcí
React poskytuje několik vestavěných metod, které lze využít k implementaci nekonečného rolování.
První metodou je `componentDidUpdate`. React tuto metodu volá po aktualizaci komponenty. Lze ji využít ke zjištění, zda uživatel dosáhl konce stránky. Pokud ano, načtou se další data.
Druhou metodou je `scroll`, kterou React volá při posouvání stránky. Tuto metodu lze využít ke sledování polohy posuvníku. Když uživatel přejde na konec stránky, je možné načíst další obsah.
Následující příklad ukazuje, jak implementovat nekonečné rolování pomocí těchto metod:
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 využívá háky `useState` a `useEffect` ke správě stavu komponenty a vedlejších efektů.
V rámci háku `useEffect` se volá metoda `fetchData` s aktuální stránkou. Metoda `fetchData` typicky provádí API volání k načtení dat. V tomto příkladě se generují fiktivní data pro demonstraci techniky.
Cyklus `for` naplní pole `newItems` 100 celými čísly. Pokud je parametr `page` roven 100, příznak `hasMore` se nastaví na `false`. To zastaví další načítání dat nekonečným rolováním.
Nakonec se aktualizuje stav s novými daty.
Metoda `onScroll` sleduje pozici posuvníku. Pokud uživatel dosáhne konce stránky, načtou se další data.
Háček `useEffect` přidá posluchač události `scroll`. Při spuštění události `scroll` se zavolá metoda `onScroll`.
Používání nekonečného rolování v Reactu má své výhody i nevýhody. Zlepšuje uživatelské rozhraní a poskytuje plynulejší zážitek, zvláště na mobilních zařízeních. Může však vést k tomu, že uživatelé přehlédnou obsah, který se nachází níže, pokud se neposunou dostatečně dolů.
Před implementací nekonečného rolování je proto důležité zvážit všechny pro a proti.
Zavedení nekonečného rolování do vaší React.js webové stránky nebo aplikace může výrazně zlepšit uživatelskou zkušenost. Uživatelé nemusí aktivně klikat na stránky pro zobrazení dalšího obsahu. Použití nekonečného rolování v aplikacích React.js může snížit počet znovunačítání stránek, což vede ke zvýšení výkonu.
Vaši React aplikaci můžete snadno a zdarma hostovat na Github Pages.