VariableSizeList: динамическая высота строк

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

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

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

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

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

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

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

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

VariableSizeList кэширует смещения элементов для повышения производительности. Если измеренная высота изменяется, необходимо вызвать метод resetAfterIndex у ссылки на список, чтобы он пересчитал позиции начиная с этого индекса.

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

Возникает проблема курицы и яйца: для отрисовки строки нужна её высота, но настоящую высоту можно узнать только после отрисовки. Список должен разместить строку, прежде чем её можно будет измерить.

Решение заключается в том, чтобы сначала отрисовать строку с оценочной высотой, а затем скорректировать её, когда станет известна точная высота.

Стандартный шаблон таков: сначала отрисовать строки с оценочной высотой, после отрисовки измерить их фактическую высоту с помощью ссылки или ResizeObserver, сохранить измеренное значение и вызвать resetAfterIndex для обновления позиций.

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

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

Нестабильная функция, объявленная непосредственно в коде, может вызвать ненужные пересчёты и ухудшить производительность, ради которой применяется виртуализация.

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

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

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

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

Вспомните, как VariableSizeList определяет высоту каждой строки.

VariableSizeList обрабатывает строки разной высоты, получая itemSize в виде функции от индекса. Высоты можно вычислить заранее или измерить; для измеренных высот нужен цикл «оценка — отрисовка — измерение — обновление» с resetAfterIndex.

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