Создать компонент бесконечного скролла на React
Условие
Создайте React-компонент, который реализует бесконечный скролл для загрузки данных.
Требования
- Автоматическая подгрузка данных при прокрутке к концу списка
- Отображение индикатора загрузки
- Обработка ошибок при загрузке
- Защита от множественных одновременных запросов
Функциональность
- Использовать Intersection Observer API для определения прокрутки
- Поддержка callback-функции для загрузки данных
- Возможность указать offset от конца списка для предзагрузки
Бонус
Добавьте виртуализацию списка для оптимизации производительности.
Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
Решение: Компонент бесконечного скролла на React
Базовое решение с Intersection Observer
Компонент InfiniteScroll использует IntersectionObserver для определения когда пользователь прокрутил к концу списка. При этом вызывается callback onLoadMore для загрузки новых данных.
Ключевые компоненты
-
Intersection Observer: observerTarget ref отслеживает видимость элемента в конце списка. Когда элемент становится видимым, вызывается handleLoadMore.
-
Защита от дублей: isLoadingRef предотвращает множественные одновременные запросы. Проверяем флаг перед загрузкой.
-
rootMargin: параметр offset задаёт расстояние в пиксель до конца списка, при котором нужно загружать (предзагрузка).
-
Индикаторы: отображаем спиннер при загрузке, сообщение об ошибке, кнопку Retry и сообщение о конце списка.
Использование
Программа загружает данные по страницам с API. Состояния: items (список), page (текущая страница), isLoading, hasMore, isError. Функция handleLoadMore увеличивает страницу и добавляет новые элементы к существующему списку.
Версия с виртуализацией
Для огромных списков (100k+ элементов) используем react-window (FixedSizeList). Это отображает только видимые элементы на экране, остальное вычисляется. Обработчик onScroll проверяет позицию и загружает при 80% прокрутки.
Производительность
- Базовое: хорошо для <5000 элементов
- С виртуализацией: 100k+ элементов без падения FPS
- Intersection Observer: более эффективен чем scroll события, не нужен throttle
Обработка ошибок
Структура try-catch в handleLoadMore перехватывает ошибки. Флаг isError показывает ошибку пользователю с кнопкой Retry для повторной попытки загрузки.