Виртуальный скроллинг

В Ant Design виртуальный скроллинг реализован через компонент List с поддержкой свойства virtual, а также через интеграцию с библиотекой rc-virtual-list, которая обеспечивает оптимизированный рендеринг больших наборов данных. Основная цель виртуального скроллинга — повышение производительности при отображении длинных списков, минимизация использования памяти и ускорение реакции интерфейса.

Основные принципы работы

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

Ключевые параметры:

  • height — высота контейнера списка, обязательна для корректного расчёта виртуального скролла.
  • itemHeight — фиксированная высота элемента списка; если элементы имеют разную высоту, используется метод estimatedItemSize.
  • virtual — флаг включения виртуального скроллинга (true или объект с дополнительными настройками).
  • dataSource — массив данных для отображения.

Пример базового использования

import React from 'react';
import { List } from 'antd';

const data = Array.from({ length: 10000 }, (_, i) => `Элемент ${i + 1}`);

const VirtualListExample = () => (
  <List
    height={400}
    itemLayout="horizontal"
    dataSource={data}
    virtual
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          title={item}
        />
      </List.Item>
    )}
  />
);

export default VirtualListExample;

В этом примере создаётся список из 10 000 элементов. За счёт включённого виртуального скроллинга Ant Design отрисовывает только элементы, видимые в пределах контейнера высотой 400px, что значительно повышает производительность.

Настройка буфера и прокрутки

В объекте virtual можно задавать дополнительные настройки:

  • itemHeight — фиксированная высота одного элемента, используется для расчёта виртуального списка.
  • fullHeight — позволяет задать полный размер содержимого для корректной прокрутки.
  • onScroll — коллбэк при скроллинге, который позволяет отслеживать положение скролла.
  • buffer — количество элементов, рендерящихся вне видимой области, чтобы избежать «скачков» при прокрутке.

Пример с расширенными настройками:

<List
  height={500}
  itemLayout="horizontal"
  dataSource={data}
  virtual={{
    itemHeight: 50,
    fullHeight: true,
    buffer: 5,
    onScroll: e => console.log('Scroll position:', e.currentTarget.scrollTop),
  }}
  renderItem={item => <List.Item>{item}</List.Item>}
/>

Использование динамической высоты элементов

Если высота элементов неизвестна заранее, можно использовать rc-virtual-list напрямую через компонент VirtualList. Он поддерживает динамическую высоту через estimatedItemSize, что позволяет корректно рендерить элементы разной высоты.

import VirtualList from 'rc-virtual-list';

<VirtualList
  data={data}
  height={400}
  itemKey="id"
  estimatedItemSize={60}
>
  {item => (
    <div style={{ padding: '10px', borderBottom: '1px solid #f0f0f0' }}>
      {item}
    </div>
  )}
</VirtualList>

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

Интеграция с компонентами Ant Design

Виртуальный скроллинг можно сочетать с любыми компонентами Ant Design, которые используют списки:

  • Table — включение виртуального скролла через scroll={{ y: 400 }} и оптимизацию через components.
  • Select — для больших наборов опций используется virtual внутри выпадающего списка.
  • Tree — рендеринг больших иерархических структур с виртуализацией через VirtualTree.

Практические советы

  1. Фиксированная высота элементов повышает производительность и упрощает расчёт.
  2. Использование буфера предотвращает «мигание» элементов при прокрутке.
  3. Динамическая высота удобна для сложных списков, но требует большей памяти и вычислений.
  4. Отложенная загрузка данных (lazy loading) в сочетании с виртуализацией снижает нагрузку на сеть и память.
  5. Оптимизация рендеринга: минимизировать сложные компоненты внутри renderItem, чтобы ускорить перерисовку элементов.

Особенности прокрутки и событий

  • onScroll — отслеживает текущее положение скролла.
  • scrollTo — программное перемещение к конкретному элементу списка.
  • Поддерживается горизонтальный скролл, если задан itemLayout="horizontal" и ширина контейнера ограничена.

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

Оглавление