Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Stretli ste sa už niekedy s webovou stránkou alebo aplikáciou, ktorá načítava a zobrazuje viac obsahu pri posúvaní? Toto nazývame nekonečný zvitok.

Nekonečné posúvanie je populárna technika, ktorá znižuje počet načítaní stránok. Môže tiež zabezpečiť plynulejší používateľský zážitok, najmä na mobilných zariadeniach.

Existuje niekoľko rôznych spôsobov, ako môžete implementovať nekonečné posúvanie v React.js. Jedným zo spôsobov je použiť knižnicu ako komponent reagovania nekonečného posúvania. Táto knižnica poskytuje komponent, ktorý spustí udalosť, keď sa používateľ posunie na koniec stránky. Túto udalosť potom môžete použiť na načítanie ďalšieho obsahu.

Ďalším spôsobom, ako implementovať nekonečné posúvanie, je použiť vstavané funkcie, ktoré React poskytuje. Jednou z takýchto funkcií je „componentDidMount“, ktorá volá React pri prvom pripojení komponentu.

Túto funkciu môžete použiť na načítanie prvej dávky údajov a potom pomocou funkcie „componentDidUpdate“ načítať ďalšie údaje, keď sa používateľ posunie nadol. Môžete tiež

instagram viewer
použite háky React pridať funkciu nekonečného posúvania.

Ak chcete použiť komponent response-infinite-scroll-component, musíte ho najprv nainštalovať pomocou npm:

npm Inštalácia reagovať-nekonečno-rolovať- komponent --uložiť

Potom ho môžete importovať do komponentu React.

importovať Reagovať od 'reagovať'
importovať Nekonečný zvitok od 'react-infinite-scroll-component'
triedaApppredlžujeReagovať.Komponent{
konštruktér() {
Super()
toto.state = {
položky: [],
 máViac: pravda
 }
 }


componentDidMount() {
toto.fetchData(1)
 }


fetchData = (stránka) => {
konšt newItems = []


pre (nech i = 0; ja < 100; i++) {
novéPoložky.TAM(i )
 }


if (strana 100) {
toto.setState({ máViac: nepravda })
 }


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


render() {
vrátiť (
<div>
<h1>Nekonečný zvitok</h1>
<Nekonečný zvitok
 dataLength={toto.state.items.length}
 dalsi={toto.fetchData}
 hasMore={toto.state.hasMore}
 nakladač={<h4>Načítava...</h4>}
 endMessage={
<p style={{ textAlign: 'stred' }}>
<b>Jéj! Videli ste to všetko</b>
</str>
 }
>
 {toto.state.items.map((položka, index) => (
<div key={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exportpredvolená App

Tento kód začína importovaním React a komponentu InfiniteScroll z knižnice komponentov React-infinite-scroll-component. Potom vytvorí stavový komponent a inicializuje stav prázdnym položky pole a a máViac príznak nastavený na hodnotu true.

V metóde životného cyklu componentDidMount zavoláte fetchData metóda s a stránku parametrom 1. Metóda fetchData zavolá API na získanie niektorých údajov. Tento príklad len generuje nejaké fiktívne údaje. Potom vytvorí pole 100 položiek.

Ak je parameter stránky 100, neexistujú žiadne ďalšie položky, preto nastavte príznak hasMore na hodnotu false. Toto zastaví komponentu InfiniteScroll vo vykonávaní ďalších volaní API. Nakoniec nastavte stav pomocou nových údajov.

Renderovacia metóda používa komponent InfiniteScroll a odovzdáva niektoré rekvizity. Prop dataLength je nastavený na dĺžku poľa položiek. Ďalšia podpera je nastavená na metódu fetchData. Podpera hasMore je nastavená na príznak hasMore. Podpera nakladača spôsobí, že komponent vykreslí svoj obsah ako indikátor načítania. Podobne vykreslí prop endMessage ako správu, keď sa všetky údaje načítajú.

Existujú aj ďalšie rekvizity, ktoré môžete odovzdať komponentu InfiniteScroll, ale tieto budete používať najčastejšie.

Používanie vstavaných funkcií

React má tiež niekoľko vstavaných metód, ktoré môžete použiť na implementáciu nekonečného posúvania.

Prvý spôsob je componentDidUpdate. React volá túto metódu po aktualizácii komponentu. Pomocou tejto metódy môžete skontrolovať, či sa používateľ posunul na koniec stránky, a ak áno, načítať ďalšie údaje.

Druhá metóda je rolovať, ktorý React zavolá, keď používateľ roluje. Túto metódu môžete použiť na sledovanie polohy rolovania. Ak sa používateľ posunul na koniec stránky, môžete načítať ďalšie údaje.

Tu je príklad toho, ako by ste mohli použiť tieto metódy na implementáciu nekonečného posúvania:

importovať Reaguj, {useState, useEffect} od 'reagovať'
funkciuApp() {
konšt [items, setItems] = useState([])
konšt [hasMore, setHasMore] = useState(pravda)
konšt [page, setPage] = useState(1)


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


konšt fetchData = (stránka) => {
konšt newItems = []


pre (nech i = 0; ja < 100; i++) {
novéPoložky.TAM(i)
 }


if (strana 100) {
 setHasMore(falošný)
 }


setItems([...items, ...newItems])
 }


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


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


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


vrátiť (
<div>
 {items.map((položka, index) => (
<div key={index}>
 {item}
</div>
 ))}
</div>
 )
}
exportpredvolená App

Tento kód používa háčiky useState a useEffect na správu stavu a vedľajších účinkov.

V háku useEffect zavolá metódu fetchData s aktuálnou stránkou. Metóda fetchData zavolá API na získanie niektorých údajov. V tomto príklade len generujete nejaké fiktívne údaje na demonštráciu techniky.

Cyklus for naplní pole newItems 100 celými číslami. Ak je parameter stránky 100, nastavte príznak hasMore na hodnotu false. Toto zastaví komponentu InfiniteScroll vo vykonávaní ďalších volaní API. Nakoniec nastavte stav s novými údajmi.

Metóda onScroll sleduje pozíciu rolovania. Ak sa používateľ posunul na koniec stránky, môžete načítať ďalšie údaje.

Hák useEffect pridá poslucháč udalosti pre udalosť posúvania. Keď sa spustí udalosť rolovania, zavolá metódu onScroll.

Používanie nekonečného posúvania má svoje výhody a nevýhody. Môže pomôcť vylepšiť používateľské rozhranie, čím sa dosiahne plynulejší zážitok, najmä na mobilných zariadeniach. Môže to však viesť aj k tomu, že používateľom chýba obsah, pretože sa nemusia posúvať nadol dostatočne ďaleko, aby ho videli.

Je dôležité zvážiť klady a zápory techniky nekonečného posúvania pred jeho implementáciou na váš web alebo do aplikácie.

Pridanie nekonečného posúvania na váš web alebo aplikáciu React.js môže pomôcť zlepšiť používateľskú skúsenosť. S nekonečným posúvaním používatelia nemusia klikať, aby videli ďalší obsah. Používanie Infinite Scroll v aplikácii React.js môže tiež pomôcť znížiť počet načítaní stránok, čo môže zlepšiť výkon.

Svoju aplikáciu React môžete tiež jednoducho bezplatne nasadiť na stránky Github.