Infinite Scroll (бесконечная прокрутка) на React.js

Infinite Scroll (бесконечная прокрутка) – это технология, которая позволяет загружать дополнительные элементы при прокрутке страницы. Она используется, когда на странице есть большое количество данных, которые не могут быть отображены все сразу. Вместо того, чтобы загружать все данные сразу, бесконечная прокрутка загружает их по мере необходимости, повышая производительность и улучшая пользовательский опыт.

Давайте создадим компонент InfiniteScroll на React.js, после посмотрим как он работает.

import React, { useState, useEffect } from "react";

const InfiniteScroll = ({ data, renderItem }) => {
  const [list, setList] = useState(data.slice(0, 10));
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;
      setLoading(true);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (!loading) return;
    if (page * 10 >= data.length) return setLoading(false);
    setTimeout(() => {
      setList(list.concat(data.slice(page * 10, page * 10 + 10)));
      setPage(page + 1);
      setLoading(false);
    }, 1000);
  }, [loading]);

  return (
    <>
      {list.map(renderItem)}
      {loading && <p>Loading...</p>}
    </>
  );
};

export default InfiniteScroll;

Данный компонент InfiniteScroll принимает 2 параметра:

• data: массив элементов, которые необходимо отобразить
• renderItem: функция, которая отвечает за отображение каждого элемента

Компонент использует 2 хука (hooks) useState:

const [list, setList] = useState(data.slice(0, 10));
const [page, setPage] = useState(1);

• list: текущий список элементов, которые отображаются на экране
• page: текущий номер страницы, для подсчета того, сколько элементов нужно добавить

Кроме того, используется хук (hook) useEffect для отслеживания скроллинга: если пользователь доскроллил до конца страницы, мы устанавливаем стейт loading в true.

useEffect(() => {
  const handleScroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;
    setLoading(true);
  };
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

Второй useEffect отвечает за добавление новых элементов, когда loading становится true. Если текущая страница уже достигла конца массива data, то мы останавливаем добавление элементов и устанавливаем loading в false. В противном случае мы добавляем 10 элементов, увеличиваем текущую страницу и устанавливаем loading в false.

useEffect(() => {
  if (!loading) return;
  if (page * 10 >= data.length) return setLoading(false);
  setTimeout(() => {
    setList(list.concat(data.slice(page * 10, page * 10 + 10)));
    setPage(page + 1);
    setLoading(false);
  }, 1000);
}, [loading]);

Компонент возвращает отображение текущего списка элементов, а также индикатор загрузки, если loading установлен в true.

Использование компонента Infinite Scroll

Импортируйте компонент в файл, где вы хотите его использовать:

import InfiniteScroll from "./InfiniteScroll";

Используйте компонент внутри вашего JSX-кода:

<InfiniteScroll
  data={data} // Массив данных, которые вы хотите показать
  renderItem={renderItem} // Функция, которая возвращает рендеринг каждого элемента
/>

Определите вашу функцию renderItem и данные data:

const data = [];

const renderItem = (item) => {
  // Здесь вы можете вернуть рендеринг каждого элемента
  return <div>{item}</div>;
};

Теперь вы можете использовать компонент Infinite Scroll в вашем приложении React.js.