Пишем библиотеку для виртуального скролла с нуля | React | часть 2
В данном видео мы будет продолжать писать наше собственное решение для виртуального скролла (виртуализации). В частности, добавим такие фичи, как работа с элементами разной высоты и авто-замер скролл-контейнера.
Код из видео:
https://github.com/Ayub-Begimkulov/yo...
Телеграмм канал:
https://telegram.me/ayub_begimkulov_c...
Ссылка на предыдущее видео:
• Пишем библиотеку для виртуального скр...
Ссылка на плейлист по разработке нашего решения для виртуального скролла:
• Библиотека виртуализации с нуля
Таймкоды:
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 - Что будем делать в следующем уроке