Как улучшить производительность приложения React Native

Реагировать на нативную архитектуру приложений
React Native основан на JavaScript, в котором часть React Native взаимодействует с потоком Native через мост.

В основном у нас есть 3 основных потока, которые запускают фреймворк. Поток пользовательского интерфейса, поток теневого дерева и поток Javascript или собственный поток.

поэтому архитектура React Native состоит из двух важных разделов:

  1. Нативная часть, построенная на Java, Swift или Objective-C.

  2. Часть React Native построена на JavaScript.

Чтобы улучшить производительность вашего приложения React Native, вот несколько общих практик, которые, несомненно, помогут вам во время создания сложного проекта.

Проблема с памятью

Это одна из самых распространенных проблем для нативных приложений с множеством ненужных процессов, работающих в фоновом режиме.

С помощью Xcode вы можете найти утечки

Перейдите в XCode → Продукт → Профиль (⌘ + i)

После этого вам будут показаны все утечки шаблона.

С помощью Android Studio можно найти утечки

Запустите приложение React Native в обычном режиме (react-native run-android)
Запустите Android-студию

В меню,
нажмите «Инструменты» → «Android» → «Включить интеграцию с ADB».
Нажмите «Инструменты» → «Android» → «Монитор устройств Android».
Когда появится Android Device Monitor, нажмите «Монитор» → «Настройки».
Perf Monitor — хороший выбор для мониторинга утечек Android.

Import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';
PerfMonitor.toggle();
 PerfMonitor.start();
 setTimeout(() => {
   PerfMonitor.stop();
 }, 20000);
}, 5000);

Чтобы устранить утечки памяти в собственных приложениях, вы можете использовать списки с прокруткой, такие как FlatList, SectionList или VirtualList, вместо Listview.

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

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

Изображения — большая проблема для большого использования памяти. Оптимизация изображений очень важна в приложении React Native.

  1. Используйте изображения меньшего размера.
  2. Используйте PNG вместо JPG.
  3. Преобразуйте свои изображения в формат WebP.

Почему формат WebP спросите вы?

Изображения WebP могут ускорить загрузку вашего изображения до 28%.
Уменьшен размер пакета CodePush на 66 % благодаря формату .webp.
Помогает уменьшить размер двоичных файлов iOS и Android на 25 % благодаря формату .webp.
React Native JS Thread работает намного быстрее
Переходы в навигаторе стали более плавными

Кэшируйте изображения локально

Кэширование изображений важно для более быстрой загрузки изображений. На данный момент React Native поддерживает кэширование изображений только на iOS.

Это быстрый пример, как видно из документации (только для IOS)

  < Image
  		source={{
    			uri: '
    			cache: 'only-if-cached',
 		 }}
 	 	style={{width: 400, height: 400}}
  / >

Для Android доступны некоторые библиотеки npm, которые помогают решить проблему кэширования изображений. К сожалению, они не предлагают лучшую производительность.

Избегайте ненужных рендеров

Переопределение обновления компонента:

Одна из наиболее распространенных проблем заключается в том, чтобы не реализовывать это состояние diff, жизненный цикл и реквизит самостоятельно в первую очередь — вы должны сначала убедиться, что ваши компоненты должны обновляться или нет, и убедитесь, что не передаете слишком много ненужной работы Reconciler, возможно, это сбросит FPS вашего потока JS. Хоть и распространяется от PureComponent вместо Component.

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

shouldComponentUpdate всегда должен возвращать логическое значение ответа на вопрос,
«Должен ли я перерисовать?»
Да, желательно, чтобы компонент был небольшим.

Использование PureComponent:

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

Метод жизненного цикла shouldComponentUpdate используется в обычном не чистом компоненте React для отмены повторного рендеринга путем возврата false в определенных сценариях.

class MyPureComponent extends React.PureComponent {
  render() {
    return (
                     Hello World
                )
        }
}

Оптимизация данных JSON

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

Извлеченные данные из частных и общедоступных API возвращаются в форме JSON, которая имеет какие-то составные вложенные объекты.

Обычно большинство программистов хранят одни и те же данные JSON для локального автономного доступа, и производительность страдает, потому что приложения JS медленно отображают данные JSON. Итак, что я хотел бы вам посоветовать, так это преобразовать необработанные данные JSON в более простые объекты перед рендерингом.

fetch('SomeURL', {
 method: 'POST',
 headers: {
    Accept: 'application/json',
   'Content-Type': 'application/json',
 },
 body: JSON.stringify({
   firstParam: 'yourValue',
   secondParam: 'yourOtherValue',
 }),
}).then((response) => response.json())
  .then((responseJson) => {
       // Use JSON.parse Method To Convert Response in Object 
       var response = JSON.parse(responseJson);
       return response;
     })
   .catch((error) => {
     console.error(error);
   })

Используйте анимацию NativeDriver

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

Вот как работает обычная анимация;

Драйвер JavaScript использует requestAnimationFrame для выполнения в каждом кадре.
Промежуточные значения рассчитываются и передаются в представление
Представление обновляется с помощью setNativeProps.
JS отправляет эти изменения в нативную среду через мост.
Нативные обновления UIView или android.View
Но родная анимация драйвера работает так.

Собственный драйвер анимации использует CADisplayLink или android.view.Choreographer для выполнения в каждом кадре.
Промежуточные значения вычисляются и передаются в представление
UIView/android.View обновлен
Пример :

  Animated.timing(
            this.state.fadeAnim, {
            toValue: 1,
            userNativeDriver: true,
           }
        ).start()

< Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // <-- Add this
  )}
>
  {content}
< /Animated.ScrollView >

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

В нативном React вы используете внешние библиотеки и библиотеки форм компонентов, поэтому это влияет на размер приложения.

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

Вы можете следовать приведенным ниже общепринятым методам уменьшения размера приложения:

Переместите компоненты из родной области в область React Native.

Компоненты на стороне JavaScript используют мост для связи с нативной стороной.

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *