Инфинити скроллинг в React JS: удержание 50 элементов в DOM

Быстрый ответ

Бесконечная прокрутка в React JS реализуется с помощью API Intersection Observer, который оптимизирует загрузку данных. Взгляните на следующий пример:

import React, { useState, useRef, useCallback } from 'react';

function InfiniteScrollList() {
  const [items, setItems] = useState([]);
  const observer = useRef();

  const lastItemRef = useCallback(node => {
    if (observer.current) observer.current.disconnect();
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        // Когда последний элемент появляется в поле зрения, загружаем новые данные
        // и добавляем их к 'items'. Конкретный массив newItems предлагается модифицировать в соответствии с вашими данными.
        setItems(prevItems => [...prevItems, ...newItems]);
      }
    });
    if (node) observer.current.observe(node); // Запуск наблюдения за последним элементом
  }, []);

  return (
    <ul>
      {items.map((item, index) => (
        <li ref={index + 1 === items.length ? lastItemRef : null} key={item.id}>
          {item.content}
        </li>
      ))}
    </ul>
  );
}

Основные шаги: Применяйте useCallback с ссылкой (ref) для отслеживания последнего элемента в списке. IntersectionObserver следит за этим элементом и вызывает загрузку новых данных, когда элемент появляется в видимой области. Код из раздела setItems предлагается заменить на свою логику загрузки данных.

Использование заглушек для элементов вне экрана

Значительно увеличивается производительность, если заменить элементы, которые в данный момент не отображаются на экране пользователя, на пустые места. Такой подход уменьшает количество DOM-элементов и обеспечивает плавную прокрутку.

Управление элементами DOM

В основе эффективного управления DOM лежит поддержка его "легковесности". Ориентируйтесь на правило 50 элементов: динамически добавляйте и удаляйте содержимое при прокрутке, чтобы добиться низкого потребления памяти и повышенной отзывчивости интерфейса.

Управление состоянием для оптимальной отрисовки

Для минимализации перерисовок и обеспечения плавной прокрутки рекомендуется хранить в состоянии диапазон видимых элементов.

Двунаправленная бесконечная прокрутка

Если появится необходимость просматривать как будущий, так и прошедший контент, возможно реализовать двунаправленную бесконечную прокрутку. Это особенно актуально для контента, чьи сюжеты развиваются во времени.

Визуализация

Бесконечную прокрутку можно представить следующим образом:

🚂 (Ваша Бесконечная Прокрутка) + 🛤️ (Непрерывное путешествие пользователя по контенту)

Загрузка нового контента... — это как поезд (🚂), останавливающийся на каждой станции (🚉) за новым грузом.

Загружаем... 🚂 ===> 📦🚉...Загружаем... 🚂 ===> 📦🚉📦 ===> 📦🚉📦📦

Здесь каждый 📦 символизирует новый блок контента, который автоматически загружается по мере прокрутки.

Таким образом, пользовательский опыт — это непрерывное путешествие, на протяжении которого плавным шагом добавляются новые истории (📜).

Библиотеки виртуализации React

Использование react-virtualized

React-virtualized — это комплексное решение по виртуализации списков, сеток и таблиц, которое повышает эффективность прокрутки. Особенно полезен CellMeasurer — инструмент для определения высоты элементов с динамическими размерами.

Подробнее об этом расскажет наш спикер на видео

Легковесный react-window

Для упрощенной виртуализации хорошо подходит библиотека react-window, которая обеспечивает высокую производительность при работе с большими объемами данных.

Выбор лучшей библиотеки

Выбор библиотеки зависит от требований вашего проекта и включает в себя факторы, такие как эффективность использования памяти и удобство управления DOM.

Изучение опыта на основе обсуждений ReactJS

Советуем прочесть примеры и решения других разработчиков на основе обсуждений в сообществе ReactJS. Опираясь на этот опыт, можно создавать эффективные решения в области бесконечной прокрутки.

Параметры, которые следует учитывать при определении размера элементов

Применение CellMeasurer

При работе с элементами разного размера CellMeasurer из react-virtualized поможет точно измерить их исходные размеры.

Ускорение процесса за счет кэширования результатов измерений

Сохранение результатов измерений для последующих прокруток способствует экономии времени и вычислительных ресурсов.

Настройка react-window

При использовании react-window необходимо настроить опции для динамических списков для точного измерения размеров элементов.

Полезные материалы

1. Реализация бесконечной прокрутки и отложенной загрузки изображений в React — Smashing Magazine — подробное руководство по реализации бесконечной прокрутки.
2. GitHub – ankeetmaini/react-infinite-scroll-component: Компонент бесконечной прокрутки для React — исходный код компонента бесконечной прокрутки.
3. Полное руководство по useEffect — overreacted.io — всё, что нужно знать о хуке useEffect прямо от Дэна Абрамова.
4. react-window — описание и примеры использования реакции окна.
5. Совмещение стримингового API, баз данных и микросервисов | Apollo GraphQL — создание бесконечных прокруток с использованием React и GraphQL.
6. API Intersection Observer – Web APIs | MDN — документация по API Intersection Observer, ключевому инструменту для реализации бесконечной прокрутки.