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

Добро пожаловать в очередной блог! Для любого реагирующего нативного приложения получение данных через вызов API становится очень важным, поскольку нам необходимо обновить локальное состояние и, следовательно, соответствующим образом отобразить данные внутри представлений. В этом блоге мы рассмотрим, как мы можем оптимизировать получение любых данных в виде изображений, видео и т. д.

Концепция предварительной выборки данных:

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

Одним из важных критериев является то, что API должен быть разработан таким образом, чтобы он мог принимать такие параметры, как лимит/размер или начальные/конечные лимиты, и приносить в ответ только те запрошенные данные.

Для демонстрации мы попытаемся клонировать очень простую версию короткометражных роликов YouTube / Instagram, но вместо видео мы попробуем использовать изображения. Мы рассмотрим, как мы можем выполнить предварительную выборку данных, чтобы избежать времени загрузки, а также ленивую загрузку данных без значительной загрузки состояния после монтирования компонента.

Давайте начнем.

Главный компонент

Внутри основного компонента нам нужно отобразить плоский список, который принимает данные. Нам также нужно передать onEndReachedThreshold, чтобы он срабатывал onEndReached, если он прокручивается до предоставленного значения пикселей снизу.

onEndReached может принять обратный вызов, который будет извлекать данные, выполняющие вызов API с обновленным размером, здесь мы обновляем setLimit, который вызовет fetchImages() в качестве побочного действия. Эта функция также будет обновлять setImages и, следовательно, у нас будет обновленный набор изображений внутри плоского списка, который будет отображать каждый элемент.

Исходный код:

Экран

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

Исходный код:

Демо -

Чтобы узнать больше о таких замечательных блогах о React Native, посетите эти —

  1. Все о React Native для начинающих: плюсы, минусы и будущее
  2. Лучшие практики кодирования — React Native Edition 2022

Спасибо за прочтение.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.