Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

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á snižuje počet načítání stránek. Může také zajistit hladší uživatelský zážitek, zejména na mobilních zařízeních.

Existuje několik různých způsobů, jak můžete implementovat nekonečné posouvání v React.js. Jedním ze způsobů je použití knihovny, jako je reagovat-infinite-scroll-component. Tato knihovna poskytuje komponentu, která spustí událost, když uživatel přejde na konec stránky. Tuto událost pak můžete použít k načtení dalšího obsahu.

Dalším způsobem, jak implementovat nekonečné posouvání, je použití vestavěných funkcí, které React poskytuje. Jednou z takových funkcí je „componentDidMount“, která React volá při prvním připojení komponenty.

Tuto funkci můžete použít k načtení první dávky dat a poté pomocí funkce „componentDidUpdate“ načíst další data, když se uživatel posune dolů. Můžete také

instagram viewer
použijte háky React přidat funkci nekonečného posouvání.

Chcete-li použít komponentu reagovat-infinite-scroll, musíte ji nejprve nainstalovat pomocí npm:

npm Nainstalujte reagovat-nekonečno-svitek-komponent --Uložit

Poté jej můžete importovat do komponenty React.

import Reagovat z 'reagovat'
import Nekonečný svitek z 'react-infinite-scroll-component'
třídaAplikacerozšiřujeReagovat.Komponent{
konstruktér() {
super()
tento.state = {
položky: [],
 má více: skutečný
 }
 }


komponentDidMount() {
tento.fetchData(1)
 }


fetchData = (stránka) => {
konst newItems = []


pro (nechat i = 0; já < 100; i++) {
nové předměty.TAM(i )
 }


if (strana 100) {
tento.setState({ má více: Nepravdivé })
 }


tento.setState({ položky: [...this.state.items, ...newItems] })
 }


poskytnout() {
vrátit se (
<div>
<h1>Nekonečný svitek</h1>
<Nekonečný svitek
 dataLength={tento.state.items.length}
 další={tento.fetchData}
 hasMore={tento.state.hasVíce}
 loader={<h4>Načítání...</h4>}
 endMessage={
<p style={{ textAlign: 'centrum' }}>
<b>Hurá! Viděli jste to všechno</b>
</str>
 }
>
 {tento.state.items.map((položka, index) => (
<div key={index}>
 {položka}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
vývoznívýchozí Aplikace

Tento kód začíná importem React a komponenty InfiniteScroll z knihovny komponent React-infinite-scroll-component. Poté vytvoří stavovou komponentu a inicializuje stav s prázdnou položky pole a má více příznak nastaven na true.

V metodě životního cyklu componentDidMount zavoláte fetchData metoda s a strana parametr 1. Metoda fetchData zavolá API, aby získala nějaká data. Tento příklad pouze generuje nějaká fiktivní data. Poté vytvoří pole 100 položek.

Pokud je parametr stránky 100, nejsou k dispozici žádné další položky, nastavte tedy příznak hasMore na hodnotu false. To zastaví komponentu 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. Další prop je nastavena na metodu fetchData. Prop hasMore je nastaven na 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í.

Existují také další rekvizity, které můžete předat komponentě InfiniteScroll, 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 nekonečného posouvání.

První metoda je componentDidUpdate. React volá tuto metodu po aktualizaci komponenty. Pomocí této metody můžete zkontrolovat, zda se uživatel posunul na konec stránky, a pokud ano, načíst další data.

Druhá metoda je svitek, kterou 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 toho, jak můžete tyto metody použít k implementaci nekonečného posouvání:

import Reagovat, {useState, useEffect} z 'reagovat'
funkceAplikace() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(skutečný)
konst [page, setPage] = useState(1)


useEffect(() => {
 fetchData (stránka)
 }, [strana])


konst fetchData = (stránka) => {
konst newItems = []


pro (nechat i = 0; já < 100; i++) {
nové předměty.TAM(i)
 }


if (strana 100) {
 setHasMore(Nepravdivé)
 }


setItems([...položky, ...novépoložky])
 }


konst onScroll = () => {
konst scrollTop = dokument.documentElement.scrollTop
konst scrollHeight = dokument.documentElement.scrollHeight
konst výška klienta = dokument.documentElement.clientHeight


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


useEffect(() => {
 window.addEventListener('svitek', onScroll)
 návrat () => window.removeEventListener('svitek', onScroll)
 }, [položky])


vrátit se (
<div>
 {items.map((položka, index) => (
<div key={index}>
 {položka}
</div>
 ))}
</div>
 )
}
vývoznívýchozí Aplikace

Tento kód používá háčky useState a useEffect ke správě stavu a vedlejších účinků.

V háku useEffect zavolá metodu fetchData s aktuální stránkou. Metoda fetchData zavolá API, aby získala nějaká data. 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 stránky 100, nastavte příznak hasMore na false. To zastaví komponentu InfiniteScroll 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řešel na konec stránky, můžete načíst další data.

Háček useEffect přidá posluchač události pro událost posouvání. Když se událost scroll spustí, zavolá metodu onScroll.

Použití nekonečného posouvání má své výhody a nevýhody. Může pomoci zlepšit uživatelské rozhraní a zajistit 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.

Je důležité zvážit pro a proti techniky nekonečného posouvání než jej implementujete na svůj web nebo do aplikace.

Přidání nekonečného posouvání na web nebo aplikaci React.js může pomoci 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 také pomoci snížit počet načítání stránek, což může zlepšit výkon.

Svou aplikaci React můžete také snadno zdarma nasadit na stránky Github.