Виртуальный скролл с нуля | React | часть 4

 

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