Пишем библиотеку для виртуального скролла с нуля | React

В данном видео мы будет с нуля писать наше собственное решение для виртуализации (виртуального скролла). Для начала разберем, что такое виртуализация, как она работает. Затем напишем хук, который позволит работать со списками с единой высотой элементов.
Код из видео:
github.com/Ayub-Begimkulov/yo...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00 - Интро
00:42 - Смотрим на конечное решение
02:20 - Какие фичи будут реализованы в этом уроке?
02:58 - Смотрим на начальный setup
03:59 - Пишем логику отслеживания scroll
06:26 - Начинаем писать логику самой виртуализации
08:44 - Разбираемся в вычислениях индексов
10:37 - Поддерживаем overscan и дописываем логику
13:07 - Исправляем проблему со скроллбаром
14:06 - Добавляем offset к элементам
17:23 - Баг с последним элементом
18:01 - Добавляем флаг isScrolling
21:06 - Логика в отдельном хуке
23:19 - Заключение

[@stanislavdanilov3253]

Очень полезный контент! Спасибо за твою работу

[@ayub_begimkulov]

Спасибо!

[@user-vm2db5cq1g]

Аюб молотчик!!! Слежу за твоими видео, побольше таких практических кейсов как этот!! Супер!

[@ayub_begimkulov]

Спасибо! В планах есть еще похожие плейлисты. Главное, чтобы просмотры не как тут набирались)))

[@v.demchenko]

Обьяснил топ🤗 Проблема, пример проблемы и как решать будет. Топ.

[@ayub_begimkulov]

Спасибо!

[@sergeyfrantsev4449]

Супер круто! Я наконец добрался всё разом посмотреть)

[@ayub_begimkulov]

Буду рад фидбэку по каждой части)

[@user-rl7ly3cz6g]

Очень интересно! Буду ждать продолжения!

[@njkzbby6174]

Да, я тоже!

[@ayub_begimkulov]

Скоро должно выйти, вторую и третью часть уже записал. Думаю в ближайшие дни еще четвертую буду записывать)

[@TheLazarev88]

Мега полезно! Было бы интересно еще sticky column и row как реализуются.

[@KycokFt]

Так ведь в видео напротив только вертикальная виртуализация ;) Клевое видео, спасибо!

[@ayub_begimkulov]

Ага, перепутал))) Спасибо!

[@ss.siberia]

Очень интересно, спасибо)

[@ayub_begimkulov]

Рад, что понравилось!

[@user-rm7oz4xu3k]

Очень очень круто, класс)

[@ayub_begimkulov]

Спасибо!

[@user-bg3hu1oz4y]

Супер! Было бы интересно посмотреть подобные "best practies"

[@ayub_begimkulov]

спасибо!

[@user-mp9hx4tt9x]

Привет, классный ролик с отличным контентом! Возник вопрос, по какой причине было решено использовать addEventListener, а не onSroll на контейнер, были ли какие-то конкретные причины, или это больше для удобства? Спасибо!

[@ayub_begimkulov]

скорее для удобства. мы же внутри хука просто доступ к DOM ноде получаем. Не хотелось, чтобы человек еще сам должен был руками вещать наш onScroll обработчик.

[@Andrey-lr7wp]

Привет, спасибо за серию видео по виртуальному скроллу, оказалось очень полезно! У меня такой вопрос - почему для конечного item ты указываешь top: 0, а после делаешь transform: translateY(virtualItem.offsetTop)? Почему сразу не установить top в нужную для этого позицию virtualItem.offsetTop? И что ты сказал на 16:41, что какой то транслейт работает более быстро, какой я не могу расслышать)

[@user-vr1bt4bv6s]

Удачи

[@ayub_begimkulov]

Спасибо!

[@HEX_CAT]

❤🎉

[@xoxo2880808]

Коммент подлиннее, для поддержки канала, спасибо, интересно:)

[@ayub_begimkulov]

Спасибо за поддержку!

[@Victor-il9gm]

отличный контент! спасибо! объясни, пожалуйста, для чего нужен overscan, с видоса не понял (

[@ayub_begimkulov]

Нужно для того, чтобы при быстром скролле ты не видел белый экран. Так как скролл происходит в отдельном треде, который переодический эммитит ивенты в JS.

[@Victor-il9gm]

@@ayub_begimkulov Спасибо за ответ! Забыл удалить вопрос, ибо стало понятно во втором видосе, где ты проговорил тоже самое, что написал в этом ответе :)

[@ummyusuf8206]

🎉🎉🎉🎉🎉

[@baileysli6235]

20:13 А можешь подсказать как ты настраиваешь TS, что он понимает, что это браузерные таймауты которые отдают число, а не нодовские?

[@ayub_begimkulov]

У меня просто не стоит @types/node в этом проекте). А так, если можно использовать widnow.setTimeout, для того, чтобы возвращалось число.

[@baileysli6235]

@@ayub_begimkulov обычно так и поступаю, поэтому удивился. Спасибо

[@luckystrike91]

я пытался тоже писать свою виртуализацию для списков, имея опыт нативной андроид разработки и так и не осилил кейс с рендерингом элементов различной высоты. в анроиде для этого есть либа recyclerview и я пытался сделать что-то подобное. но фишка в том, что в андроиде у всех компонентов есть стадия измерения, лейаута и собственно отрисовки, и можно эти методы переопределить и посчитать/изменить размеры ещё не отрисованого элемента. как с этим быть в html/js я так и не понял, в предвкушении следующего видео!)

[@ayub_begimkulov]

На самом деле тут что-то похожее получается. В определенных стадиях рендеринга компонента производим нужные действия. Правда работать с этим не так просто и очевидно. Спасибо за фидбэк!

[@slprime-old]

ух... помню как делал подобное на чистом js для ie8 в свое время. наигрался знатно, зато скорость работы была космической

[@ayub_begimkulov]

IE вообще боль огромная, тем более восьмой. Там получается даже es5 не поддерживался же?

[@slprime-old]

@@ayub_begimkulov ага

[@rustamakhmetyanov4404]

Как раз что такое хочу сделать в проекте, я делал с intersection observer, с бека приходят товары по 6шт например, в экран влезает 4шт, и когда скрол доходит до предпоследнего загпуженного товара кидается запрос на бек. Но теперь проблема, когда юзер открывает страницу товара и выходит назад, как то надо сохранять, товары которые он просмотрел, либо только кусок прошлого списка, но тогда придётся ещё скрол наверх обрабатывать как то))

[@Mr.Bellamy]

Дак а в чем проблема? Текущий отображаемый список и позицию скролла хранишь в глобальном стейте и сетаешь их при возврате, вместо дефолтных первых n элементов и топСкролл = 0. 3 месяца прошло уже, но может кому-то другому пригодится)

[@rustamakhmetyanov4404]

@@Mr.Bellamy проблема была как потом отслеживать обратный скрол и грузить предыдущие. Сколько грузить позиций типа обычно грузишь по 6, а при возврате надо ли сверху и снизу ещё по 6 грузить или только по скролу))

[@dankryt]

По-моему в данном кейсе было бы лучше использовать intersection observer, чем вешать листенер на скролл

[@ayub_begimkulov]

А можешь пожалуйста раскрыть мысль? Не совсем понимаю, как он тут мог бы помочь? IntersectionObsrver больше же про попадание элемента во viewport, то есть нужно, чтобы DOM элемент уже был какой-то. А в нашем случае у нас вообще не рендериться ничего, кроме видимых элементов + overscan.

[@alexeyfilippov42]

хм с ходу не придумал где это использовать для чего такая таблица. кажется не видел таких примеров раньше

[@ayub_begimkulov]

Бывают таблицы, где нужно отображать большое количество данных (500+) без пагинации. В таких случаях полезно бывает.

[@ruslanjafarov]

какой шрифт и фонт-сайз?

[@ayub_begimkulov]

По шрифту -- дефолты из VSCode на маке (Menlo, Monaco, 'Courier New', monospace) Касательно фонт сайз -- 14px + один раз на cmd+ нажал, чтобы на телефонах тоже все видно было.

[@ruslanjafarov]

@@ayub_begimkulov, благодарю

[@user-lv2tm3kh5s]

Очень жаль, что данный подход с абсолютным позиционированием не подходит для таблиц. А так решение хорошее

[@ayub_begimkulov]

Ты ведь под таблицами подразумеваешь табличную верстку (table, tr, td, display: table и тд)? Просто есть библиотеки, которые и их виртуализировать могут. Из популярных помню react-virtuoso. Можешь в его сторону посмотреть.

[@user-lv2tm3kh5s]

@@ayub_begimkulov Да, именно про html таблицу. Но хочу применить для проекта на Ангуляре, так как у нас таблицы очень специфические и с большим объемом данных, в память подгружается до 100 mb, очень тяжко приходится браузеру. Спасибо, посмотрю, как в этой библиотеке реализовано

[@AlexeyProgramming]

Какой «гений» додумался называть виртуальной скролл виртуализацией 💩 Виртуализация обычно относится к созданию виртуальной изолированной системы для исполнения кода абстрагированного от аппаратной реализации. Я уж думал докер напишет или эмулятор, а тут всего лишь виртуальный скролл для которого уже и так десятки библиотек существует 🤭

[@jgkdmdevienjjgg8866]

Виртуализированное отображение списков/контента наверное правильнее, но в контексте фронтенда обычно только это и бывает, по этому так сокращают

[@Artur-pk3sw]

извини бро, это я так назвал

[@konstantinsamodurov436]

- "Какой «гений» додумался называть виртуальной скролл виртуализацией" Вот-вот... Есть же устоявшиеся термины: рендеринг - она же "отрисовка"... Автор - в следующий раз будет диз...

[@jenek051]

Кому надо, всё понял))

[@alcor9921]

​@@konstantinsamodurov436ну заплачь

[@fedordostoevskiy4209]

Виктор Карпов делал похожее и называл "Виртуальный лист".) Это для умников про докер. 😂 Кто-то есть его уровня викомментах? 😂

[@user-kj6go4ft4j]

🎉🎉🎉🎉🎉