В данном видео мы будет продолжать писать наше собственное решение для виртуального скролла (виртуализации). В частности, добавим такие фичи, как работа с элементами разной высоты и авто-замер скролл-контейнера.
Код из видео:
Телеграмм канал:
Таймкоды:
00:00 – Интро
00:07 – Что было в прошлом видео?
00:16 – Какие фичи будут реализованы в этом уроке?
00:32 – Смотрим на начальный setup
01:13 – начинаем дорабатывать хук UseFixedSizeList для работы с динамическим замером элементов и контейнера
01:22 – Динамически измеряем высоту контейнера
04:46 – Тестим измерение высоты контейнера
05:11 – Добавляем возможность иметь элементы с разной высотой
05:48 – Точные высоты строк известны (Easy mode)
06:30 – Объяснение алгоритма, определяющего, какие элементы входят во viewport
08:40 – Реализуем алгоритм
14:52 – Тестируем
15:15 – Точные высоты строк неизвестны (Hard mode)
16:25 – Объяснение алгоритма замера элемента
17:45 – Начинаем писать логику с примерной высотой элемента, логику кеширования высоты элемента
20:02 – Функция валидации пропсов
21:30 – Продолжаем писать логику высоты элемента
24:33 – Добавляем логику проверки кеша с помощью дата-атрибутов
26:55 – Дописываем кеширование высоты элемента
28:55 – Тестируем
29:36 – Исправляем баг с высотой элемента
30:30 – Что будем делать в следующем уроке
[ad_2]
source
