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

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

jsx
Скопировать код
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, ключевому инструменту для реализации бесконечной прокрутки.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой API используется для реализации бесконечной прокрутки в React JS?
1 / 5