React.JS: создание огромных списков

Автор Maksim Inshakov
React.JS: создание огромных списков

Привет меня зовут.

Максим Иванов и сейчас мы будем учиться работать с огромными списками вариант. Что такое огромные списки — это начиная от пары тысяч и заканчивая миллионами которые нужно отображать одновременно зачем — это может быть нужно. Ну например если вы пишете приложение чат или Messenger или у вас приложение есть новостная лента.

Или ваше приложение — это табличный процессор наподобие XL.

Или вы просто отображается много данных и вам важно чтобы они все были на одной странице в общем кейсов на самом деле довольно много как мы будем этому учиться мы напишем приложение который отобразит список всех городов планеты. Земля А — это больше трёх миллионов записей и для каждого города мы покажем звание и популяцию в общем выпуск. Обещает быть полезным поэтому. Ставь лайк и подписывайся начнем с плохого. Почему нельзя отобразить большой список в котором несколько элементов просто как — это обычно делается в реакт. Я подготовил небольшую дырку сейчас покажу, что у нас получится если мы попробуем отрисовать несколько сотен тысяч элементов и вот например я массив длиной 300000 элементов тут я использую хитрую технику сначала. Я создаю массив из пустых элементов, а потом беру индексы и на их основе создаю новый массив при помощи оператора. А дальше при помощи методом. А я генерирую наши элементы списка тут. Важно не забыть предоставить ключ — это важно потому, что react используют ключи для. Определи античности элементов и если ваш массив поменяется вы. Поменяйте порядок элементов в нём ряд не будет пересол элементы зря и так у нас есть 300.000 элементов. Давайте посмотрим как их рисуют браузер и пожалуйста браузер вообще отказался что-то рендерить. Говорит, что странице работает слишком медленно и предлагает вообще работу убедились как же нам решить эту проблему нужно как-то оптимизировать рендеринг для этого существует специальная техника которая называется у. Индии или как она наверное по-русски основание или окончание. Напишите в комментариях. Как вы думаете о стоит называть по-русски пока разберёмся, что она из себя представляет суть техники довольно. И она часто используется в играх заключается она в том, что мы говорим только те элементы которые пользователь. Сейчас может видеть то есть то, что выходит за пределы экрана. Мы не отрисовывает в случае со списками. Мы также переиспользовать созданные элементы именно эта техника используется в библиотеке. Брайан О'Коннор react-window. Ты сперва. Попробуй моё на примере из документации. Я установил два пакета реакцию индол и react-virtualized autosizer второй пакет нужен для того чтобы растянуть наш список на весь экран. Давайте посмотрим на код компонентов вот наш компонент списка он принимает название класса — это css-класс который будет использоваться высоту ширину размер ячейки в нашем случае список вертикальный поэтому — это высота ячейки и количество элементов которые нужно отрисовать я обернула в autosizer чтобы получить высоту и ширину и продал их через props теперь посмотрим на компонент Row он получает текущий индекс и стиль стиль. Мы пробрасывает в наш элемент который будем рендерить — это важно потому, что таким образом react-window управляет позиции элементов нас здесь я применяю для четных и нечетных элементов и просто отображается номер текущей ячейки. Давайте посмотрим как — это выглядит и вот наш список из 1000 элементов всё работает плавно, но мы просто индексы. А хотелось бы отображать какие-то данные. Давайте усложняем например и перейдем к созданию списков всех городов планеты данные мы будем получать сайта Open Data Soft у них фотосет всех городов с населением и есть открытые я взял за основу предыдущий пример и добавил несколько изменений во-первых нам потребуется Infinite Loader из пакета react Infinite Loader во-вторых нам теперь нужно как-то хранить загруженные города, а также нам потребуется кэш для того чтобы не выполняет лишние запросы говорил через который мы будем получать я вынес в отдельную функцию по-хорошему стоил вынести её в отдельный модуль. Но для наглядности. Я оставил её здесь формируем. Передовая туда количество элементов которые мы хотим получить за один раз и стартовый индекс то есть мы можем сказать. Хочу получить 10 городов начиная с 100 по 110 дальше компонент ячейки тоже. Пришлось поменять так как теперь мы отображая мне просто номер ряда, а мы теперь берём данные которые мы загрузили у каждого города есть поле Accent City — это название просто в этом и Piano называется вот так и популяция если города с таким ID с таким индексом ещё не загружена то я показываю строк loading с этим разобрались теперь посмотрим как используется. Инфинити надо я обернулась в него наш список и получил два значения которые нужно пробросить через проб и он этом. Слендер и. Джефф количество элементов. Я оставил. Захар кожен для этого примера — это неважно можно было взять количество сам. Инфинити фловер нужно передать две функции и сайт лодок для определения, что конкретный элемент был уже загружен и lot More Items эта функция которая будет срабатывать при скролле именно с её помощью мы будем загружать новые данные из этом loaded устроена очень просто в этой функции я просто проверяю, что в нашем объекте этом на текущий индекс уже загруженный какой-то элемент двойное отрицание используется чтобы преобразовать элемент города в булевые значения. А вот lot More Items она несколько сложнее так как она вызывается. Каждый раз когда вы с кролики ваш список. Есть риск того, что вы будете делать слишком много запросов поэтому здесь пришлось реализовать дополнительные. Каширова — это функция получает два. Яндекса первый элемент который виден и последний. То есть каждый раз мы получаем диапазон видимых элементов. Первое, что я делаю. Это выполняю каширование по ключу. Я создаю строку соедини эти два.

0 комментариев
0

Читайте также