В данном видео мы будет продолжать писать наше собственное решение для виртуального скролла (виртуализации). В частности, добавим такие фичи, как работа с элементами разной высоты и авто-замер скролл-контейнера. Код из видео:
Телеграмм канал:
Ссылка на предыдущее видео:
Ссылка на плейлист по разработке нашего решения для виртуального скролла: https://www.youtube.com/playlist?list=PL8fK_R8Bd4mgOEYa8naA2wv-EzmMNHMeK
Таймкоды: 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 - Что будем делать в следующем уроке
