Мы живем в мире, где гибридное приложение предпочтительнее собственного. Многие платформы предоставляют такие же функции, как Xamarin, React Native и Ionic. Однако React Native экономит ваше драгоценное время благодаря своим встроенным необычным функциям и количеству кода, который вы написали на нативной платформе, такой как Android и IOS.

Начиная с общего обсуждения, пара статей считает, что приложение React Native работает медленно, в результате они обвиняют фреймворк React Native в медленном или сталкиваются с проблемами производительности. Возникает ли на самом деле вопрос: медленная работа приложения или какой-то фрагмент кода снижает производительность приложения? Однако есть такие гигантские компании с хорошей репутацией, как Facebook, Pinterest, Skype , которые разработали свое приложение на той же платформе, которая называется «React Native».

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

  1. Повышение эффективности запуска приложений:

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

Найдите то, что требует времени для загрузки:

Самое замечательное в JavaScript и возможности отладки вашего приложения заключается в том, что JavaScript может работать на многих вещах, и в React Native есть функция, называемая удаленной отладкой javascript. На самом деле он отправляет приложение JavaScript React Native в браузер, которое выполняет их полное приложение, строит дерево компонентов, отправляет сигнал на устройство и сообщает устройству, что необходимо отобразить в собственном коде.

Полный код JavaScript отображается в браузере, а это означает, что у нас есть полный доступ к инструментам разработки, которые поставляются с браузерами. Например, в C hrome перейдите на вкладку производительности, затем нажмите «Запись» и получите образец. Он имеет очень хорошую интеграцию React Native с хорошей диаграммой пламени всех компонентов, которые загружаются, и мы можем видеть, какие компоненты работают медленно, а какие ненужные. Таким образом, мы можем сделать некоторые предположения, например, давайте не будем рассматривать этот компонент или рассматривать его, или давайте сначала оптимизируем его.

Кроме того, есть еще одна опция Systrace, с помощью которой мы можем видеть и отслеживать, как компонент выглядит на реальных устройствах с помощью React Native.

Более того, вы можете использовать Flipper в качестве аналога устройств Android и iOS в виде инструмента отладки. Есть несколько функций, включая инспектор компоновки и сети, просмотрщик журналов с чистым пользовательским интерфейсом. Кроме того, вы можете отслеживать свои функции, методы и многие логические вещи, просто чтобы установить этот плагин. Итак, измерение производительности - это искусство. Но я думаю, что эти инструменты - хорошее начало для измерения приложения React Native.

Получение сетевых данных параллельно с настройкой RN

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

Мы также можем использовать GraphQL. Он разработан Facebook и предоставляет язык запросов и манипулирования данными с открытым исходным кодом для API-интерфейсов, а также среду выполнения для выполнения запросов с существующими данными, кэширования данных и повышения производительности приложений.

Оптимизировать пакет JavaScript

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

Например, у нас есть основной файл пакета размером 40 МБ для загрузки приложения. Однако мы можем масштабировать файлы в различные файлы пакетов и загружать все, что нам нужно изначально загрузить при запуске приложения.

Мы можем использовать RAM (оперативное запоминающее устройство) для выполнения упомянутого выше пункта в RN для достижения нашей цели. Основной механизм, стоящий за сценой, заключается в том, что он может загружать файлы всякий раз, когда нам требуются определенные функции или требования. Теперь давайте рассмотрим решение в реальном времени, как мы можем включить эту мощную функцию в React Native.

Включение формата ОЗУ в iOS:

Чтобы включить формат RAM для iOS, вам нужно открыть XCode, выбрать проект, перейти в

Build Phases и отредактируйте фазу Bundle React Native code and images. До

../node_modules/react-native/scripts/react-native-xcode.sh

вам нужно добавить BUNDLE_COMMAND=ram-bundle

export BUNDLE_COMMAND="ram-bundle"
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

Включить формат ОЗУ в Android:

На Android включите формат RAM, отредактировав файл android/app/build.gradle.

Перед подачей строки из: ../../node_modules/react-native/react.gradle добавьте или измените блок project.ext.react:

project.ext.react = [
bundleCommand: "ram-bundle",
]

Добавив это, мы можем использовать RAM (оперативное запоминающее устройство) сборщик .

Требуется встроенное

Допустим, у нас очень большие компоненты, и он делает что-то неприятное, а не только console.log. Теперь вы хотите использовать этот компонент, но знаете, что это тяжелый компонент, и он очень медленный. Вы просто поставили условие, что они не загружают этот компонент, прежде чем я нажму кнопку. Но вы не знали, что импорт действительно загружается быстро и загружается в память.

Используйте встроенные требования, которые позволяют импортировать файлы внутри функции. мы определяем вызов новой переменной, пусть очень дорого с undefined и требуется этот модуль после щелчка, и тогда он доступен для рендеринга.

мы можем делать это во всем приложении, поэтому благодаря сборщику метро, ​​который позволяет нам устанавливать конфигурацию на уровне приложения.

2. Оптимизируйте код React

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

Избегайте множественных вызовов render ()

Ваш компонент действительно нуждается в повторном рендеринге снова и снова? Вы должны найти ответ на этот вопрос. Потому что в приложении React Native, если ваш компонент отрисовывается снова и снова, это определенно влияет на производительность вашего приложения.

Совет. Чтобы избежать этого, мы можем использовать ShouldComponentUpdate метод из жизненного цикла компонента.

shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.isUpdated !== this.props.isUpdated) {
        return true;
     }
     return false;
}

Если вы не хотите обрабатывать это вручную, мы также можем использовать PureComponent. Это будет применимо к Class Component.

Если вы хотите использовать его с Functional Component и перехватчиками реакции, тогда доступно react.memo перехватчиков для запоминания значения вашего компонента.

Еще одна интересная вещь, доступная в пакете npm, - это why-did-you-render. Название предполагает why-did-you-render, который используется, чтобы найти причины рендеринга и помочь избежать этого. Если вы допустили ошибку в неправильном рендеринге, в консоли отображаются журналы, поэтому вы можете исправить это.

Примечание. Убедитесь, что why-did-you-render библиотека НИКОГДА не должна использоваться в рабочей среде, поскольку она замедляет React.

Оптимизировать изображение

Если вы используете изображения эффективно, вы улучшаете производительность своего приложения. Потому что изображения занимают большую часть общего размера вашего приложения. Оптимизация изображения - хорошее дело для улучшения приложения. Уменьшая размер вашей графики, мы можем уменьшить размер приложения. Лучший способ получить изображения экранов приложения для создания нужного формата, например PNG или WebP.

Другое дело, что правильное обналичивание тоже помогает улучшить приложение. Есть много доступных модулей для обналичивания ваших изображений.

Совет. Используйте библиотеку, например, для react-native-cached-image кэширования и загрузки изображений. Вот как мы можем это использовать.

import { CachedImage } from 'react-native-cached-image'; 
<CachedImage 
source={{ uri: item.urls }}
/>

Избегайте утечки памяти

Поскольку на устройствах Android в фоновом режиме работают дополнительные процессы, это может привести к утечке памяти в приложении. По возможности избегайте этого фонового материала. Чтобы избежать утечки памяти, избегайте использования списка. Поскольку представление списка обесценивается самим React Native. Вместо представления списка попробуйте использовать плоский список или список разделов, который действительно может улучшить производительность списка.

Уменьшить размер приложения

Уменьшение размера приложения может улучшить его производительность. Теперь вопрос в том, как уменьшить размер приложения. Большинство приложений JavaScript требует использования собственных компонентов и сторонних библиотек в виде пакетов npm, которые увеличивают размер приложения.

Совет. Чтобы уменьшить размер, используйте только необходимые компоненты, оптимизируйте использование этих компонентов, а также мы можем использовать proguard и уменьшить размер графики. Давайте посмотрим, как мы можем настроить конфигурацию Android для использования proguard.

  • Откройте студию Android.
  • В исходной папке перейдите к android/app откройте build.gradle файл и найдите строки ниже.
/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false
  • Вам не нужно ничего делать, просто установите истинное значение для enableSeparateBuildPerCPUArchitecture и enableProguardInReleaseBuilds.
/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = true

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = true
  • enableProguardInReleasebuilds, если для этого параметра установлено значение true, фактически выполняется сжатие байтового кода Java в файле приложения. Это уменьшит размер приложения на 50%.
  • enableSeparateBuildPerCPUArchitecture он обеспечит преимущества различных архитектур Android, таких как armebi и x86, наиболее распространенным из которых является armebi. . Установка этого значения в true даст на выходе 4 разных apk. Каждый из файлов .apk будет иметь значительное уменьшение размера приложения.

  • Android App Bundle который публикует весь ваш скомпилированный и структурированный код с хорошо организованными ресурсами. Google Play использовал ваш набор приложений и преобразовал его в определенную и оптимизированную конфигурацию с APK-файлами необходимых ресурсов на разных совместимых устройствах. Итак, вы не собираетесь делать такие вещи, как создание, подписание и управление APK для различных устройств.

Примечание: Android App Bundle всегда должно быть предпочтительнее enableSeparateBuildPerCPUArchitecture

Только нативная анимация
Есть много способов создать анимацию в приложении React Native. Один из самых популярных способов сделать это - использовать библиотеку Animated.

Анимированный useNativeDriver для отправки анимации через собственный мост перед запуском анимации. Это помогает анимации выполняться независимо от заблокированного потока JavaScript, что обеспечивает более плавную работу без потери большого количества кадров.

Совет. Чтобы использовать nativeDriver с библиотекой Animated, вы можете установить для него значение true. В приведенном ниже примере useNativeDriver используется для поворота изображения наша функция time будет выглядеть так:

Animated.timing(
  this.state.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
  }
).start();

Избегайте прокрутки, если список большой
Есть несколько способов создания прокручиваемых списков в React Native. Обычно в ядре React Native доступны компоненты ScrollView и FlatList.

Компонент ScrollView реализовать просто. Он используется для просмотра списка из конечного числа элементов с помощью функции JavaScript map().

<ScrollView>
 {items.map(item => {
  return <Item key={item.name.toString()}>
 })}
</ScrollView>

Компонент ScrollView отображает всех дочерних элементов сразу. Это хорошо, когда количество элементов в списке для рендеринга невелико. Работа с большим объемом данных может напрямую повлиять на производительность приложения.

Совет. Для работы с большими списками элементов React Native предоставляет компонент под названием FlatList. Этот компонент обеспечивает отложенную загрузку элементов, так что приложение не потребляет непоследовательный объем памяти.

<FlatList
data={elements}
keyExtractor={item => `${item.name}`}
renderItem={({ item }) => <Item key={item.name.toString()}>}
/>

Заключительные мысли по поводу повышения производительности вашего приложения React Native

В заключение, упомянутое и факты, если мы заботимся о шаблонах кодирования, встроенных функциях RN и избегаем устаревших функций и шаблонов, которые позволили вашему приложению работать быстрее, и вы не можете пренебрегать “React Native слишком рано просто учитывать его более низкую производительность.

Спасибо, что прочитали это! Я надеюсь, что после прочтения этого замечательного блога вы научились новым методам, и это поможет вам в написании кода. Если вам понравилась и вам понравилась эта статья, бросьте мне аплодисменты👏.