FixedSizeList: отрисовка тысяч элементов

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

После установки импортируйте нужные компоненты списка, чаще всего FixedSizeList для строк, имеющих одинаковую высоту.

Для работы FixedSizeList нужны несколько свойств: высота и ширина определяют контейнер прокрутки, itemCount — количество элементов, а itemSize — высоту каждой строки в пикселях.

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

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

Вы возвращаете JSX для одной строки, а react-window вызывает эту функцию только для строк, находящихся в видимой области.

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

Если не применить стиль, все строки окажутся в одном положении, и виртуализация визуально перестанет работать.

Самая распространённая ошибка при работе с react-window — не передать свойство стиля строке. Список будет выглядеть сломанным: строки наложатся друг на друга вверху, а прокрутка начнёт работать неправильно.

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

Вместо того чтобы захватывать массив внутри функции рендеринга, можно передать его через свойство itemData. Затем react-window передаёт его строке как поле данных вместе с индексом и стилем.

Так компонент строки не зависит напрямую от источника данных, а мемоизация может стать проще, поскольку строка получает данные явно.

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

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

Свойство overscanCount отрисовывает несколько дополнительных строк сразу за пределами видимой области. Этот буфер снижает вероятность появления пустого места при быстрой прокрутке, пока новые строки ещё не смонтированы.

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

FixedSizeList нужны явные размеры в пикселях, что неудобно в адаптивных макетах. Вспомогательный компонент AutoSizer измеряет родительский элемент и передаёт списку ширину и высоту через свойство-функцию рендеринга.

Если обернуть список в AutoSizer, он заполнит гибкий контейнер без жёстко заданных размеров и будет адаптироваться к изменениям макета.

Рабочая конфигурация FixedSizeList задаёт высоту, ширину, itemCount и itemSize и отрисовывает строки с помощью функции, применяющей свойство стиля. При необходимости AutoSizer передаёт размеры, а overscanCount добавляет буфер.

После этого список любой длины хранит смонтированными только видимые строки, а прокрутка остаётся плавной.

Вспомните, какие сведения нужно передать FixedSizeList для правильного рендеринга строк.

FixedSizeList отрисовывает строки одинаковой высоты, используя высоту, ширину, itemCount, itemSize и функцию рендеринга дочернего содержимого, которая получает индекс и стиль. Применять свойство стиля обязательно, иначе строки наложатся друг на друга.

Передавайте данные через itemData, поддерживайте горизонтальный макет, добавляйте небольшой буфер overscanCount и используйте AutoSizer для заполнения адаптивных контейнеров без жёстко заданных размеров.