Jak dodać nieskończone przewijanie w React.js

Czy kiedykolwiek natknąłeś się na stronę internetową lub aplikację, która ładuje się i wyświetla więcej treści podczas przewijania? Nazywamy to nieskończonym przewijaniem.

Nieskończone przewijanie jest coraz bardziej rozpowszechnioną metodologią, która może ułatwić przeglądanie znacznych ilości danych i poprawić ogólne wrażenia użytkownika, szczególnie na gadżetach przenośnych.

Implementacja nieskończonego przewijania w React.js

Istnieje kilka metod implementacji nieskończonego przewijania w aplikacji React, jedno z takich podejść obejmuje wykorzystanie biblioteki o nazwie react-infinite-scroll-component . Komponent tej konkretnej biblioteki monitoruje zachowanie użytkownika podczas przewijania i emituje zdarzenie, gdy dotrze on do końca strony. Wykorzystując to zdarzenie, można następnie zainicjować ładowanie dodatkowej zawartości.

Aby włączyć instancję nieskończonego przewijania do aplikacji React, można wykorzystać nieodłączne funkcje dostarczane przez framework. Wśród tych funkcji znajduje się metoda “componentDidMount”, którą React aktywuje podczas inicjalizacji komponentu.

Funkcję tę można wykorzystać do załadowania początkowego zestawu danych, a następnie wykorzystać metodę “componentDidUpdate” do pobierania dodatkowych informacji, gdy użytkownik przewija stronę w dół.

Hooki React mogą być wykorzystane do zaimplementowania funkcji nieskończonego przewijania w aplikacji, zapewniając płynne wrażenia użytkownika, ponieważ zawartość ładuje się bez przerwy.

Korzystanie z biblioteki react-infinite-scroll-component

Podczas korzystania z komponentu React Infinite Scroll można zastosować kilka podejść.

Zainstaluj react-infinite-scroll-component

Aby rozpocząć użytkowanie, pierwszym krokiem jest zainstalowanie go za pomocą Menedżera pakietów Node (npm).

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

Zaimportuj react-infinite-scroll-component do React

Po montażu konieczne jest włączenie biblioteki nieskończonego przewijania do elementu 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

Kod importuje zarówno Reacta, jak i komponent InfiniteScroll z biblioteki react-infinite-scroll-component, a następnie tworzy stanowy komponent. Początkowy stan komponentu składa się z pustej tablicy “items” i flagi “hasMore” ustawionej na true.

Set Parameters

W metodzie cyklu życia componentDidMount konieczne jest wywołanie funkcji fetchData z parametrem page ustawionym na 1 . Procedura fetchData wykonuje żądanie API w celu pobrania danych.Ta instancja nieskończonego scrollera React tworzy fikcyjne dane i konstruuje tablicę zawierającą sto elementów.

Po osiągnięciu wartości stu dla parametru page, wskazującej, że nie ma dostępnych żadnych dodatkowych elementów, rozsądnie jest skonfigurować flagę “hasMore” jako fałszywą, wykluczając w ten sposób dalsze wywołania komponentu InfiniteScroll. Następnie aktualizacja stanu za pomocą nowo pozyskanego zestawu danych jest skutecznym sposobem działania.

Metoda render wykorzystuje komponent InfiniteScroll , dostarczając pewne właściwości jako argumenty. W szczególności właściwość dataLength ma przypisaną wartość odpowiadającą długości tablicy items . Dodatkowo, funkcja fetchData służy jako kolejna dostarczona właściwość. Wreszcie, właściwość hasMore jest ustawiona na wartość flagi hasMore .

Właściwość loader działa poprzez prezentowanie zawartości komponentu jako wskaźnika ładowania. Podobnie, po zakończeniu ładowania wszystkich danych, właściwość endMessage jest wyświetlana jako komunikat w komponencie.

Podczas korzystania z komponentu InfiniteScroll powszechne jest stosowanie pewnych często używanych rekwizytów. Jednakże, można również dostarczyć dodatkowe rekwizyty w razie potrzeby.

Korzystanie z wbudowanych funkcji

React zapewnia zestaw nieodłącznych funkcji, które umożliwiają implementację InfiniteScroll poprzez wykorzystanie jego wbudowanych metod.

Metoda componentDidUpdate cyklu życia w React jest wywoływana przez framework po aktualizacji komponentu. To podejście sterowane zdarzeniami pozwala programistom na implementację niestandardowej logiki do wykrywania, kiedy należy pobrać nowe dane w oparciu o pozycję przewijania użytkownika. Zasadniczo metoda ta służy jako mechanizm do określania, czy dodatkowa zawartość powinna zostać załadowana poniżej bieżącego progu rzutni po wykryciu, że użytkownik osiągnął koniec widocznej części strony.

React zapewnia wbudowany mechanizm o nazwie scroll , który jest wyzwalany przez akcję przewijania użytkownika, umożliwiając programistom monitorowanie i utrzymywanie świadomości bieżącej pozycji przewijania w ich aplikacji. Takie podejście oparte na zdarzeniach umożliwia dynamiczne ładowanie dodatkowej zawartości, gdy użytkownik osiągnie dolną część widocznego zakresu strony, zapewniając optymalne wrażenia z przeglądania.

Dostarczony kod demonstruje przykład wykorzystania wyżej wymienionych technik w kontekście aplikacji React, w szczególności w odniesieniu do implementacji funkcji nieskończonego przewijania.

 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 wykorzystuje zarówno haki useState , jak i useEffect w celu ułatwienia zarządzania stanem, a także implementacji pożądanych efektów ubocznych w aplikacji.

W zakresie haka useEffect , obecna iteracja funkcji wywołuje metodę fetchData , przekazując jako parametr bieżący stan paginacji. Wspomniana metoda wykonuje następnie żądanie HTTP w celu pobrania informacji z zewnętrznego źródła. Wyłącznie w celach ilustracyjnych, w tym przypadku symulujemy generowanie niektórych hipotetycznych danych, aby zilustrować omawianą koncepcję.

Pętla for iteracyjnie dołącza serię elementów do tablicy newItems , stopniowo zwiększając jej wartość, aż osiągnie sto. Jednocześnie, jeśli ustalona wartość parametru page przekroczy sto, zmienna boolean hasMore zostanie ustawiona na false, zatrzymując w ten sposób wszelkie dodatkowe żądania wykonane przez mechanizm nieskończonego przewijania.

Na koniec ustal aktualny stan na podstawie zaktualizowanych informacji.

Metoda onScroll utrzymuje zapis bieżącej pozycji przewijania, a po osiągnięciu dolnej części strony dynamicznie ładuje dodatkową zawartość lub dane w odpowiedzi na dalszą interakcję użytkownika z interfejsem.

Wykorzystanie useEffect Hook ułatwia dodanie słuchacza dla zdarzenia przewijania. W odpowiedzi na wystąpienie wspomnianego zdarzenia wywoływana jest metoda oznaczona jako onScroll .

Wady i zalety nieskończonego przewijania w Reakcie

Implementacja nieskończonego przewijania w Reakcie ma zarówno zalety, jak i wady. Z jednej strony, funkcja ta poprawia ogólny interfejs użytkownika, zapewniając płynną nawigację, szczególnie na platformach mobilnych, gdzie przestrzeń ekranu jest ograniczona. Z drugiej strony, istnieje potencjalne ryzyko, że użytkownicy mogą przeoczyć treści, które znajdują się poza ich początkowym punktem widzenia, ponieważ mogli nie przewinąć wystarczająco, aby zobaczyć wszystkie elementy.

Kluczowe znaczenie ma dokładna ocena zalet i wad związanych z wykorzystaniem techniki nieskończonego przewijania w projektowaniu stron internetowych, ponieważ podejście to może mieć znaczący wpływ na wrażenia użytkownika i jego zaangażowanie.

Poprawa doświadczenia użytkownika dzięki nieskończonemu przewijaniu w React.js

Włączenie mechanizmu nieskończonego przewijania do aplikacji React.js może poprawić ogólne doświadczenie użytkownika, eliminując potrzebę dodatkowych kliknięć w celu uzyskania dostępu do większej ilości treści. Takie podejście może również potencjalnie zmniejszyć całkowitą liczbę wykonanych żądań strony, zwiększając tym samym wydajność i wydajność aplikacji.

Wdrażanie aplikacji React na GitHub Pages to prosty proces, który nie wymaga żadnych inwestycji finansowych.