Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

Ar kada nors susidūrėte su svetaine ar programa, kuri įkelia ir rodo daugiau turinio, kai slenkate? Tai mes vadiname begaliniu slinkimu.

Begalinis slinkimas yra populiari technika, kuri sumažina puslapių įkėlimų skaičių. Tai taip pat gali palengvinti vartotojo patirtį, ypač mobiliuosiuose įrenginiuose.

Yra keletas skirtingų būdų, kaip galite įdiegti begalinį slinkimą React.js. Vienas iš būdų yra naudoti biblioteką, pvz., react-infinite-scroll-component. Šioje bibliotekoje yra komponentas, kuris suaktyvins įvykį, kai vartotojas slinks į puslapio apačią. Tada galite naudoti šį įvykį, kad įkeltumėte daugiau turinio.

Kitas būdas įgyvendinti begalinį slinkimą yra naudoti integruotas funkcijas, kurias teikia React. Viena iš tokių funkcijų yra „componentDidMount“, kurią „React“ iškviečia pirmą kartą sumontavus komponentą.

Galite naudoti šią funkciją norėdami įkelti pirmą duomenų paketą, o tada naudoti funkciją „componentDidUpdate“, kad įkeltumėte daugiau duomenų, kai vartotojas slenka žemyn. Tu taip pat gali

instagram viewer
naudokite React kabliukus kad pridėtumėte begalinio slinkimo funkciją.

Norėdami naudoti „react-infinite-scroll-component“, pirmiausia turite jį įdiegti naudodami npm:

npm diegti reaguoti-begalinis-slinkti-komponentas --sutaupyti

Tada galite importuoti jį į savo „React“ komponentą.

importuoti Reaguoti iš 'reaguoti'
importuoti InfiniteScroll iš 'react-infinite-scroll-component'
klasėProgramėlėtęsiasiReaguoti.Komponentas{
konstruktorius() {
super()
tai.state = {
daiktų: [],
 turi daugiau: tiesa
 }
 }


ComponentDidMount() {
tai.fetchData(1)
 }


fetchData = (puslapis) => {
konst nauji elementai = []


dėl (leisti aš = 0; aš < 100; i++) {
nauji daiktai.stumti(i )
 }


if (100 psl.) {
tai.setState({ turiDaugiau: klaidinga })
 }


tai.setState({ daiktų: [...this.state.items, ...newItems] })
 }


render() {
grąžinti (
<div>
<h1>Begalinis slinktis</h1>
<InfiniteScroll
 dataLength={tai.state.items.length}
 kitas={tai.fetchData}
 hasMore={tai.state.hasDaugiau}
 loader={<h4>Įkeliama...</h4>}
 endMessage={
<p style={{ textLygiuoti: 'centras' }}>
<b>Valio! Jūs visa tai matėte</b>
</p>
 }
>
 {tai.state.items.map((elementas, indeksas) => (
<div raktas={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksportuotinumatytas Programėlė

Šis kodas pradedamas importuojant „React“ ir „InfiniteScroll“ komponentą iš „react-infinite-scroll-component“ bibliotekos. Tada jis sukuria būsenos komponentą ir inicijuoja būseną tuščia daiktų masyvas ir a turiDaugiau vėliava nustatyta į teisingą.

„ComponentDidMount“ gyvavimo ciklo metodu iškviečiate gauti duomenis metodas su a puslapį parametras 1. FetchData metodas iškviečia API, kad gautų kai kuriuos duomenis. Šis pavyzdys tiesiog generuoja kai kuriuos netikrus duomenis. Tada sukuriamas 100 elementų masyvas.

Jei puslapio parametras yra 100, elementų daugiau nėra, todėl žymą hasMore nustatykite į false. Tai neleis InfiniteScroll komponentui atlikti tolesnius API skambučius. Galiausiai nustatykite būseną naudodami naujus duomenis.

Pateikimo metodas naudoja „InfiniteScroll“ komponentą ir perduoda kai kuriuos rekvizitus. DataLength pasiūlymas nustatytas pagal elementų masyvo ilgį. Kitas pasiūlymas nustatytas į fetchData metodą. Rekvizitas „hasMore“ nustatytas kaip „hasMore“ vėliavėlė. Pakrovėjo atrama priverčia komponentą pateikti savo turinį kaip pakrovimo indikatorių. Taip pat endMessage pasiūlymas bus pateiktas kaip pranešimas, kai visi duomenys bus įkelti.

Taip pat yra ir kitų rekvizitų, kuriuos galite perduoti „InfiniteScroll“ komponentui, tačiau tai yra tie, kuriuos naudosite dažniausiai.

Integruotų funkcijų naudojimas

„React“ taip pat turi keletą integruotų metodų, kuriuos galite naudoti begaliniam slinkimui įgyvendinti.

Pirmasis metodas yra ComponentDidUpdate. React iškviečia šį metodą atnaujinus komponentą. Šį metodą galite naudoti norėdami patikrinti, ar vartotojas nuslinko į puslapio apačią, ir, jei taip, įkelkite daugiau duomenų.

Antrasis metodas yra slinkti, kurią „React“ iškviečia, kai vartotojas slenka. Šį metodą galite naudoti norėdami stebėti slinkimo padėtį. Jei vartotojas nuslinko į puslapio apačią, galite įkelti daugiau duomenų.

Štai pavyzdys, kaip galite naudoti šiuos metodus begaliniam slinkimui įgyvendinti:

importuoti Reaguoti, {useState, useEffect} iš 'reaguoti'
funkcijaProgramėlė() {
konst [elementai, setItems] = useState([])
konst [hasMore, setHasMore] = useState(tiesa)
konst [puslapis, setPage] = useState(1)


useEffect(() => {
 „fetchData“ (puslapis)
 }, [puslapis])


konst fetchData = (puslapis) => {
konst nauji elementai = []


dėl (leisti aš = 0; aš < 100; i++) {
nauji daiktai.stumti(i)
 }


if (100 psl.) {
 setHasMore(klaidinga)
 }


nustatyti daiktai([...elementai, ...nauji elementai])
 }


konst onScroll = () => {
konst slinkties viršus = dokumentas.documentElement.scrollTop
konst slinkties aukštis = dokumentas.documentElement.scrollHeight
konst kliento aukštis = dokumentas.documentElement.clientHeight


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


useEffect(() => {
 window.addEventListener('slinkti', onScroll)
 grąžinti () => window.removeEventListener('slinkti', onScroll)
 }, [elementai])


grąžinti (
<div>
 {items.map((prekė, indeksas) => (
<div raktas={index}>
 {item}
</div>
 ))}
</div>
 )
}
eksportuotinumatytas Programėlė

Šis kodas naudoja „useState“ ir „useEffect“ kabliukus, kad valdytų būseną ir šalutinį poveikį.

„useEffect Hook“ iškviečia metodą „fetchData“ su dabartiniu puslapiu. FetchData metodas iškviečia API, kad gautų kai kuriuos duomenis. Šiame pavyzdyje jūs tiesiog generuojate kai kuriuos netikrus duomenis, kad parodytumėte techniką.

Ciklas for užpildo newItems masyvą 100 sveikųjų skaičių. Jei puslapio parametras yra 100, nustatykite žymą hasMore kaip false. Tai neleis InfiniteScroll komponentui atlikti tolesnius API skambučius. Galiausiai nustatykite būseną naujais duomenimis.

OnScroll metodas seka slinkties padėtį. Jei vartotojas nuslinko į puslapio apačią, galite įkelti daugiau duomenų.

Kabliukas useEffect prideda slinkimo įvykio įvykių klausytoją. Kai suaktyvinamas slinkties įvykis, iškviečiamas onScroll metodas.

Begalinio slinkties naudojimas turi privalumų ir trūkumų. Tai gali padėti patobulinti vartotojo sąsają ir užtikrinti sklandesnę patirtį, ypač mobiliuosiuose įrenginiuose. Tačiau dėl to naudotojai taip pat gali prarasti turinį, nes jie gali neslinkti žemyn pakankamai toli, kad jį pamatytų.

Svarbu pasverti privalumus ir trūkumus begalinio slinkties techniką prieš įdiegdami ją savo svetainėje ar programoje.

Begalinis slinkimas prie savo React.js svetainės ar programos gali padėti pagerinti naudotojo patirtį. Naudojant begalinį slinkimą, naudotojams nereikia spustelėti, kad pamatytų daugiau turinio. Infinite Scroll naudojimas React.js programoje taip pat gali padėti sumažinti puslapių įkėlimų skaičių, o tai gali pagerinti našumą.

Taip pat galite lengvai nemokamai įdiegti „React“ programą „Github“ puslapiuose.