Виртуализированные списки используют для оптимизации рендеринга, когда надо показать очень большое количество элементов. В таких списках рендерятся только те элементы, которые видны пользователю. В React-экосистеме уже есть готовые компоненты для создания таких списков, но у Марка возникла проблема при интеграции с другим фреймворком, поэтому ему пришлось написать свою реализацию.
Суть библиотеки такая: берём внешний контейнер, для которого, выставляем
overflow: scroll и внутренний контейнер с высотой numItems * itemHeight. При скролле внутреннего контейнера высчитываем диапазон индексов тех элементов, которые надо отобразить (например, scrollTop / itemHeight для первого индекса). Рендерим эти элементы.Мне нравятся статьи "Делаем N с нуля", обычно в них разбирается основная идея, которую можно использовать при создании собственной реализации с учётом особенностей проекта или чтобы лучше понять устройство используемой библиотеки. В общем, если будете делать что-то подобное (не обязательно в React), советую почитать статью.
#react #performance #diy
https://medium.com/ingeniouslysimple/building-a-virtualized-list-from-scratch-9225e8bec120
