Виртуальный скролл с нуля | React | часть 4
В данном видео мы наконец закончим разрабатывать наше собственное решение для виртуального скролла (виртуализации). Будем добавлять такие фичи, как горизонтальная виртуализация и динамический замер ширины колонок. Также подправим пару багов и добавим небольшие улучшения по перформансу.
Ссылка на плейлист по виртуальному скроллу
• Библиотека виртуализации с нуля
Пост про rafThrottle:
https://t.me/ayub_begimkulov_coding/219
Ссылка на Телеграмм канал:
https://t.me/ayub_begimkulov_coding
Таймкоды:
00:00 - Интро
00:26 - Изменения с прошлого урока
02:32 - Добавляем нужные пропсы для горизонтальной виртуализации
04:40 - Добавляем scrollLeft и gridHeight
07:22 - Реализуем логику горизонтальной виртуализации
10:20 - Добавляем горизонтальную виртуализацию в наш пример
15:10 - Проверяем горизонтальную виртуализацию
15:56 - Понимаем причину бага
19:16 - Исправляем баг
22:22 - Проверяем исправленный код
23:01 - Понимаем логику динамического замера колонок
25:11 - Добавляем estimateColumnWidth
27:06 - Добавляем вычисление ширины каждой колонки на основе кеша
31:35 - Используем массив ширин наших колонок
33:22 - Динамический замер ширины колонок
38:43 - Добавлем динамический замер колонок
41:01 - Проверяем наш замер в браузере
42:45 - Финальные улучшения
47:53 - Проверяем финальное решение
49:15 - Заключение