Végtelen görgetés hozzáadása a React.js-hez

Találkoztál már olyan weboldallal vagy alkalmazással, amely görgetés közben több tartalmat tölt be és jelenít meg? Ezt nevezzük végtelen görgetésnek.

A végtelen görgetés egy népszerű technika, amely megkönnyíti a nagy mennyiségű tartalom böngészését. Simább felhasználói élményt is biztosíthat, különösen mobileszközökön.

A végtelen görgetést a React alkalmazásban többféleképpen is megvalósíthatja. Az első egy olyan könyvtár használata, mint a react-infinite-scroll-component. Ennek a könyvtárnak az összetevője eseményt indít el, amikor a felhasználó az oldal aljára görget. Ezt az eseményt ezután jelzésként használhatja további tartalom betöltéséhez.

A végtelen görgetés megvalósításának másik módja a Reactban a beépített funkciói. Az egyik ilyen funkció a „componentDidMount”, amelyet a React hív meg, amikor először csatlakoztat egy összetevőt.

Használhatja ezt a funkciót az első adatköteg betöltésére, majd a „componentDidUpdate” függvényt a következő adatok betöltésére, miközben a felhasználó lefelé görget.

A React hook segítségével végtelen görgetési funkciót is hozzáadhat.

Számos módja van a react-infinite-scroll-komponens használatának.

Telepítse a react-infinite-scroll-komponenst

A használat elindításához először telepítenie kell az npm-en keresztül:

 npm install react-infinite-scroll-component --save 

Importálja a react-infinite-scroll-komponenst a React alkalmazásba

A telepítés után importálnia kell a végtelen görgetőkönyvtárat a React összetevőbe.

 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>Infinite Scroll</h1>
        <InfiniteScroll
          dataLength={this.state.items.length}
          next={this.fetchData}
          hasMore={this.state.hasMore}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {this.state.items.map((item, index) => (
            <div key={index}>
              {item}
            </div>
          ))}
        </InfiniteScroll>
      </div>
    )
  }
}
 
export default App

Ez a kód a React és az InfiniteScroll összetevő importálásával kezdődik a react-infinite-scroll-komponens könyvtárból. Ezután létrehoz egy állapottartó komponenst, és inicializálja azt egy üres elemtömbbel, valamint a True értékre állított hasMore jelzővel.

Paraméterek beállítása

A componentDidMount életciklus metódusban meg kell hívnia a fetchData metódust 1-es oldalparaméterrel. A fetchData metódus API-hívást hajt végre az adatok lekéréséhez. Ez a react-infinite-scroller példa létrehoz néhány ál adatot, és létrehoz egy 100 elemből álló tömböt.

Ha az oldalparaméter eléri a 100-at, mivel nincs több elem, a hasMore jelzőt False értékre állíthatja. Ez megakadályozza, hogy az InfiniteScroll összetevő további API-hívásokat indítson. Végül állítsa be az állapotot az új adatok segítségével.

A renderelési módszer az InfiniteScroll komponenst használja, és átad néhány kelléket. A dataLength prop az elemek tömbjének hosszára van beállítva. A következő prop a fetchData metódusra van beállítva. A hasMore beállítás egyenlő a hasMore jelzővel.

A rakodótámasz hatására az alkatrész töltésjelzőként jeleníti meg a tartalmát. Hasonlóképpen az endMessage propot üzenetként jeleníti meg, amikor az összes adat betöltődött.

Más kellékeket is átadhat az InfiniteScroll komponensnek, de ezeket a leggyakrabban használja.

Beépített funkciók használata

A React rendelkezik néhány beépített módszerrel is, amelyek segítségével megvalósíthatja az InfiniteScrollt.

Az első módszer a componentDidUpdate. A React meghívja ezt a metódust, miután frissít egy összetevőt. Ezzel a módszerrel ellenőrizheti, hogy a felhasználó az oldal aljára görgett-e. Ha igen, akkor több adatot tölt be.

A második módszer a scroll, amelyet a React hív meg, amikor a felhasználó görget. Ezzel a módszerrel nyomon követheti a görgetés pozícióját. Több adatot tölthet be, ha a felhasználó az oldal aljára görgett.

Íme egy példa a React végtelen görgetésre, amely bemutatja az alábbi módszerek használatát:

 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

Ez a kód a useState és a useEffect hook segítségével kezeli az állapotot és a mellékhatásokat.

A useEffect hookon belül meghívja a fetchData metódust az aktuális oldallal. A fetchData metódus API-hívást indít az adatok lekéréséhez. Ebben a példában csak néhány áladatot generál a technika bemutatására.

A for ciklus 100 egész számmal tölti fel a newItems tömböt. Ha az oldalparaméter 100, akkor a hasMore jelzőt False értékre állítja. Ez megakadályozza, hogy a végtelen görgetési komponens további API-hívásokat indítson.

Végül állítsa be az állapotot az új adatokkal.

Az onScroll módszer nyomon követi a görgetés pozícióját. Több adatot tölthet be, ha a felhasználó az oldal aljára görget.

A useEffect hook eseményfigyelőt ad hozzá a görgetési eseményhez. Amikor a scroll esemény elindul, meghívja az onScroll metódust.

A React végtelen görgetésének előnyei és hátrányai is vannak. Javítja a felhasználói felületet, simább élményt biztosítva, különösen mobileszközökön. Ez azonban azt is eredményezheti, hogy a felhasználók elveszítik a tartalmat, mivel előfordulhat, hogy nem görgetnek le eléggé ahhoz, hogy lássák.

Alapvető fontosságú, hogy mérlegelje a végtelen görgetés technikájának előnyeit és hátrányait, mielőtt implementálja webhelyén vagy alkalmazásában.

A végtelen görgetés hozzáadása a React.js webhelyhez vagy alkalmazáshoz javíthatja a felhasználói élményt. A végtelen görgetésnek köszönhetően a felhasználóknak nem kell kattintaniuk, hogy több tartalmat láthassanak. Az Infinite Scroll használata a React.js alkalmazásban csökkentheti az oldalbetöltések számát, ami tovább javítja a teljesítményt.

A React alkalmazást egyszerűen és ingyenesen telepítheti a Github oldalakra is.