Бесконечная прокрутка на React

Введение

Иногда появляются задачи на вывод большого кол-ва элементов, без возможности подгрузки порциями с помощью пагинации или прокрутки страницы пользователем.

В таком случае без оптимизированного решения приложение будет тормозить, что естественно не соотвествует логике использования React. Для таких сценариев подойдут виртуализация и библиотека react-window.

Зачем использовать react-window?

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

Установка

Для начала установим необходимые зависимости:

1npm install react-window

Если проект использует TypeScript, убедитесь, что установлены типы для библиотеки:

1npm install --save-dev @types/react-window

Реализация бесконечной ленты

Компонент List с использованием react-window

Создадим компонент для отображения списка:

1import React from 'react';
2import { FixedSizeList as List } from 'react-window';
3
4type ItemProps

Объяснение кода

1. Компонент Row: Отвечает за отрисовку одного элемента списка.
2. Свойства List:

Бесконечная загрузка данных

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

1import React, { useState, useCallback } from 'react';
2import { FixedSizeList as List } from 'react-window';
3

Ключевые моменты реализации

1. generateItems: Функция для создания новых элементов.
2. loadMoreItems: Подгружает дополнительные элементы при достижении конца списка.
3. onItemsRendered: Отслеживает видимые элементы и инициирует загрузку при необходимости.

Заключение

Использование react-window в связке с React и TypeScript позволяет легко реализовать производительное приложение с бесконечной лентой. Виртуализация сокращает использование ресурсов, а подгрузка данных обеспечивает масштабируемость.