Czy kiedykolwiek natknąłeś się na witrynę lub aplikację, która ładuje i wyświetla więcej treści podczas przewijania? To właśnie nazywamy nieskończonym przewijaniem.
Nieskończone przewijanie to popularna technika, która może ułatwić przeglądanie dużych ilości treści. Może również zapewnić płynniejszą obsługę użytkownika, zwłaszcza na urządzeniach mobilnych.
Możesz zaimplementować nieskończone przewijanie w React na kilka różnych sposobów. Pierwszym z nich jest użycie biblioteki takiej jak reagujący-infinite-scroll-component. Komponent tej biblioteki wyzwala zdarzenie za każdym razem, gdy użytkownik przewinie stronę w dół. Następnie możesz użyć tego zdarzenia jako wskazówki do załadowania większej ilości treści.
Innym sposobem na zaimplementowanie nieskończonego przewijania w Reactie jest użycie jego wbudowanych funkcji. Jedną z takich funkcji jest „componentDidMount”, którą React wywołuje, gdy po raz pierwszy montuje komponent.
Możesz użyć tej funkcji, aby załadować pierwszą partię danych, a następnie użyć funkcji „componentDidUpdate”, aby załadować kolejne dane w miarę przewijania przez użytkownika.
Możesz także użyć haków React, aby dodać funkcję nieskończonego przewijania.
Istnieje kilka sposobów użycia komponentu przewijania reagującego na nieskończoność.
Spis treści:
Zainstaluj komponent-scroll-infinite
Aby rozpocząć korzystanie, musisz najpierw zainstalować go przez npm:
npm install react-infinite-scroll-component --save
Zaimportuj komponent React-infinite-scroll do React
Po instalacji musisz zaimportować bibliotekę nieskończonego przewijania do swojego komponentu React.
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
Ten kod zaczyna się od zaimportowania Reacta i komponentu InfiniteScroll z biblioteki komponentów React-infinite-scroll. Następnie tworzy komponent stanowy i inicjuje go tablicą pustych elementów oraz flagą hasMore ustawioną na True.
Ustaw parametry
W metodzie cyklu życia komponentDidMount należy wywołać metodę fetchData z parametrem page ustawionym na 1. Metoda fetchData wykonuje wywołanie API w celu pobrania danych. Ten przykładowy scroller reagujący na nieskończoność generuje pewne fikcyjne dane i tworzy tablicę składającą się ze 100 elementów.
Gdy parametr page osiągnie wartość 100, ponieważ nie ma już więcej elementów, możesz ustawić flagę hasMore na False. Uniemożliwia to komponentowi InfiniteScroll wykonywanie dalszych wywołań API. Na koniec ustaw stan, korzystając z nowych danych.
Metoda render wykorzystuje komponent InfiniteScroll i przekazuje niektóre rekwizyty. Właściwość dataLength jest ustawiona na długość tablicy items. Następująca właściwość jest ustawiona na metodę fetchData. Właściwość hasMore jest równa flagi hasMore.
Opcja modułu ładującego powoduje, że komponent renderuje swoją zawartość jako wskaźnik ładowania. Podobnie, po zakończeniu ładowania wszystkich danych wyrenderuje właściwość endMessage jako wiadomość.
Możesz przekazać inne właściwości do komponentu InfiniteScroll, ale tych będziesz używać najczęściej.
Korzystanie z wbudowanych funkcji
React ma również kilka wbudowanych metod, których możesz użyć do zaimplementowania InfiniteScroll.
Pierwsza metoda to ComponentDidUpdate. React wywołuje tę metodę po zaktualizowaniu komponentu. Możesz użyć tej metody, aby sprawdzić, czy użytkownik przewinął do dołu strony. Jeśli tak, ładuje więcej danych.
Drugą metodą jest scroll, którą React wywołuje, gdy użytkownik przewija. Możesz użyć tej metody, aby śledzić pozycję przewijania. Możesz załadować więcej danych, jeśli użytkownik przewinął do dołu strony.
Oto przykład nieskończonego przewijania React, który pokazuje, jak używać tych metod:
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
Ten kod używa haków useState i useEffect do zarządzania stanem i efektami ubocznymi.
W haku useEffect wywołuje metodę fetchData z bieżącą stroną. Metoda fetchData wywołuje API w celu pobrania danych. W tym przykładzie po prostu generujesz fikcyjne dane, aby zademonstrować technikę.
Pętla for wypełnia tablicę newItems 100 liczbami całkowitymi. Jeśli parametr page ma wartość 100, ustawia flagę hasMore na False. Zatrzymuje to komponent nieskończonego przewijania przed wykonywaniem dalszych wywołań API.
Na koniec ustaw stan z nowymi danymi.
Metoda onScroll śledzi pozycję przewijania. Możesz załadować więcej danych, jeśli użytkownik przewinie do dołu strony.
Hak useEffect dodaje detektor zdarzeń dla zdarzenia przewijania. Po uruchomieniu zdarzenia scroll wywołuje metodę onScroll.
Używanie nieskończonego przewijania w React ma zalety i wady. Poprawia interfejs użytkownika, zapewniając płynniejszą obsługę, szczególnie na urządzeniach mobilnych. Może to jednak również spowodować, że użytkownicy pominą treść, ponieważ mogą nie przewinąć w dół wystarczająco daleko, aby ją zobaczyć.
Przed wdrożeniem jej w witrynie lub aplikacji konieczne jest rozważenie zalet i wad techniki nieskończonego przewijania.
Dodanie nieskończonego przewijania do Twojej witryny lub aplikacji React.js może poprawić wygodę użytkownika. Dzięki nieskończonemu przewijaniu użytkownicy nie muszą klikać, aby zobaczyć więcej treści. Korzystanie z Infinite Scroll w aplikacji React.js może zmniejszyć liczbę ładowań stron, co dodatkowo poprawia wydajność.
Możesz także łatwo i bezpłatnie wdrożyć swoją aplikację React na stronach Github.