Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.

Kas olete kunagi kohanud veebisaiti või rakendust, mis laadib ja kuvab kerimise ajal rohkem sisu? Seda me nimetame lõpmatuks kerimiseks.

Lõpmatu kerimine on populaarne tehnika, mis vähendab lehtede laadimiste arvu. See võib muuta ka sujuvama kasutuskogemuse, eriti mobiilseadmetes.

Lõpmatu kerimise rakendamiseks rakenduses React.js on mitu erinevat viisi. Üks võimalus on kasutada teeki, näiteks react-infinite-scroll-component. See teek pakub komponenti, mis käivitab sündmuse, kui kasutaja lehe allossa kerib. Seejärel saate seda sündmust kasutada rohkema sisu laadimiseks.

Teine võimalus lõputu kerimise rakendamiseks on kasutada Reacti pakutavaid sisseehitatud funktsioone. Üks selline funktsioon on "componentDidMount", mille React kutsub komponendi esmakordsel paigaldamisel.

Saate seda funktsiooni kasutada esimese andmepartii laadimiseks ja seejärel kasutada funktsiooni "componentDidUpdate", et laadida alla rohkem andmeid, kui kasutaja alla kerib. Sa saad ka

instagram viewer
kasutage Reacti konkse lõputu kerimisfunktsiooni lisamiseks.

React-infinite-scroll-komponendi kasutamiseks peate selle esmalt installima, kasutades npm:

npm installida reageerida-lõpmatu-kerige- komponent -- salvestada

Seejärel saate selle importida oma Reacti komponenti.

importida Reageerige alates 'reageeri'
importida InfiniteScroll alates 'react-infinite-scroll-komponent'
klassRakendusulatubReageerige.Komponent{
konstruktor() {
Super()
see.state = {
esemed: [],
 on rohkem: tõsi
 }
 }


komponentDidMount() {
see.fetchData(1)
 }


fetchData = (leht) => {
konst newItems = []


jaoks (lase i = 0; ma < 100; i++) {
uued esemed.push(i )
 }


if (lk 100) {
see.setState({ on Rohkem: vale })
 }


see.setState({ esemed: [...this.state.items, ...newItems] })
 }


render() {
tagasi (
<div>
<h1>Lõpmatu kerimine</h1>
<InfiniteScroll
 dataLength={see.state.items.length}
 järgmine={see.fetchData}
 hasMore={see.state.hasMore}
 loader={<h4>Laadimine...</h4>}
 endMessage={
<p style={{ textAlign: 'Keskus' }}>
<b>Jee! Olete seda kõike näinud</b>
</lk>
 }
>
 {see.state.items.map((üksus, register) => (
<div võti={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksportidavaikimisi Rakendus

See kood algab Reacti ja komponendi InfiniteScroll importimisega react-infinite-scroll-komponentide teegist. Seejärel loob see olekupõhise komponendi ja lähtestab oleku tühjaga esemed massiiv ja a on Rohkem lipp seatud tõeseks.

ComponentDidMount elutsükli meetodis kutsute välja too andmed meetod a lehel parameeter 1. FetchData meetod teeb andmete hankimiseks API-kutse. See näide genereerib lihtsalt mõned näilised andmed. Seejärel loob see 100 üksusest koosneva massiivi.

Kui lehe parameeter on 100, pole enam üksusi, seega määrake lipu hasMore väärtuseks false. See peatab komponendil InfiniteScroll edasiste API-kõnede tegemise. Lõpuks määrake olek uute andmete abil.

Renderdamismeetod kasutab komponenti InfiniteScroll ja läbib mõned rekvisiidid. DataLength prop on seatud üksuste massiivi pikkusele. Järgmine tugi on seatud meetodile fetchData. Rekvisiit hasMore on seatud lipule hasMore. Laadija tugiseade muudab komponendi oma sisu laadimisindikaatoriks. Samuti renderdab see endMessage propi sõnumina, kui kõik andmed on laaditud.

On ka muid rekvisiite, mida saate InfiniteScrolli komponendile edastada, kuid neid kasutate kõige sagedamini.

Sisseehitatud funktsioonide kasutamine

Reactil on ka mõned sisseehitatud meetodid, mida saate kasutada lõpmatu kerimise rakendamiseks.

Esimene meetod on komponentDidUpdate. React kutsub seda meetodit välja pärast selle komponendi värskendamist. Selle meetodi abil saate kontrollida, kas kasutaja on lehe allossa kerinud, ja kui jah, laadida rohkem andmeid.

Teine meetod on kerige, millele React helistab, kui kasutaja kerib. Seda meetodit saate kasutada kerimisasendi jälgimiseks. Kui kasutaja on kerinud lehe allossa, saate seejärel laadida rohkem andmeid.

Siin on näide selle kohta, kuidas saate neid meetodeid kasutada lõpmatu kerimise rakendamiseks.

importida Reageerida, {useState, useEffect} alates 'reageeri'
funktsiooniRakendus() {
konst [üksused, setItems] = useState([])
konst [hasMore, setHasMore] = useState(tõsi)
konst [page, setPage] = useState(1)


useEffect(() => {
 tooda andmed (leht)
 }, [lehekülg])


konst fetchData = (leht) => {
konst newItems = []


jaoks (lase i = 0; ma < 100; i++) {
uued esemed.push(i)
 }


if (lk 100) {
 setHasMore(vale)
 }


setItems([...üksused, ...uued üksused])
 }


konst onScroll = () => {
konst scrollTop = dokument.documentElement.scrollTop
konst scrollHeight = dokument.documentElement.scrollHeight
konst kliendi kõrgus = dokument.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (lehekülg + 1)
 }
 }


useEffect(() => {
 window.addEventListener('kerige', onScroll)
 tagasi () => window.removeEventListener('kerige', onScroll)
 }, [esemed])


tagasi (
<div>
 {items.map((üksus, register) => (
<div võti={index}>
 {item}
</div>
 ))}
</div>
 )
}
eksportidavaikimisi Rakendus

See kood kasutab oleku- ja kõrvalmõjude haldamiseks konkse useState ja useEffect.

Konksus useEffect kutsub see praeguse lehega välja meetodi fetchData. FetchData meetod teeb andmete hankimiseks API-kutse. Selles näites genereerite tehnika demonstreerimiseks lihtsalt näivaid andmeid.

Silmus for täidab massiivi newItems 100 täisarvuga. Kui lehe parameeter on 100, määrake lipu hasMore väärtuseks false. See peatab komponendil InfiniteScroll edasiste API-kõnede tegemise. Lõpuks määrake olek uute andmetega.

OnScroll meetod jälgib kerimisasendit. Kui kasutaja on kerinud lehe allossa, saate laadida rohkem andmeid.

Konks useEffect lisab kerimissündmusele sündmustekuulaja. Kui kerimissündmus käivitub, kutsub see välja meetodi onScroll.

Lõpmatu kerimise kasutamisel on plusse ja miinuseid. See võib aidata parandada kasutajaliidest, muutes kasutuskogemuse sujuvamaks, eriti mobiilseadmetes. See võib aga viia ka selleni, et kasutajad ei pruugi sisu näha, kuna nad ei pruugi selle nägemiseks piisavalt alla kerida.

Oluline on kaaluda plusse ja miinuseid lõpmatu kerimise tehnikast enne selle oma veebisaidil või rakenduses juurutamist.

Lõpmatu kerimise lisamine oma React.js veebisaidile või rakendusele võib aidata kasutajakogemust parandada. Lõpmatu kerimise korral ei pea kasutajad rohkema sisu nägemiseks klõpsama. Infinite Scrolli kasutamine rakenduses React.js võib samuti aidata vähendada lehtede laadimiste arvu, mis võib parandada jõudlust.

Samuti saate oma Reacti rakenduse hõlpsalt Githubi lehtedele tasuta juurutada.