Как виртуальные списки обрабатывают элементы с переменной высотой?

Основная концепция

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

Методы обработки переменной высоты

• Предварительное измерение: Все элементы рендерятся один раз (возможно, вне экрана), их высота измеряется и сохраняется в массиве. Затем список использует эти данные для расчета позиций.
• Динамическое измерение: Высота измеряется в момент первого появления элемента в видимой области. После измерения позиции последующих элементов корректируются.
• Оценка на основе среднего: Используется средняя высота элемента для приблизительного расчета, что может привести к ошибкам прокрутки, но проще в реализации.

Пример реализации на JavaScript

class VirtualList {
  constructor(container, items, estimatedHeight = 50) {
    this.container = container;
    this.items = items;
    this.estimatedHeight = estimatedHeight;
    this.heights = new Array(items.length).fill(estimatedHeight);
    this.positions = [];
    this.calculatePositions();
  }

  calculatePositions() {
    let offset = 0;
    this.positions = this.heights.map((h) => {
      const pos = offset;
      offset += h;
      return pos;
    });
  }

  updateHeight(index, actualHeight) {
    this.heights[index] = actualHeight;
    this.calculatePositions();
    this.render();
  }

  render() {
    const scrollTop = this.container.scrollTop;
    const containerHeight = this.container.clientHeight;
    const startIndex = this.findIndex(scrollTop);
    const endIndex = this.findIndex(scrollTop + containerHeight);
    // отрисовка элементов с startIndex по endIndex
  }

  findIndex(offset) {
    // бинарный поиск по this.positions
  }
}

Применение на практике

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

Вывод

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