Посмотрите, как вы повысите производительность своего реагирующего нативного приложения, сократите время запуска, уменьшите размер пакета и использование памяти.
Ключевые моменты -
- Гермес
- Избегайте повторного рендеринга с помощью useMemo
- Кэшировать изображения
- Используйте nativeDriver с анимированной библиотекой
- Управление состоянием с помощью Redux / MobX / Apollo
- Удалить журнал консоли
- Оптимизировать размер приложения для Android
1. Гермес
Hermes - это движок JavaScript с открытым исходным кодом, оптимизированный для React Native. Интеграция Hermes помогает сократить время запуска, уменьшить использование памяти и уменьшить размер приложения.
С Hermes ваше приложение будет запускаться с двукратной скоростью, использование памяти уменьшится до 30%, размер пакета приложений Android уменьшится на 30%, производительность приложения iOS повысится.
Посмотрим, как интегрировать Гермес. Гермес поддерживает поддержку iOS после версии 0.64. Поэтому не забудьте обновить свое приложение с помощью React Native Upgrade Helper.
Включение Гермеса -
Android -
Добавьте следующую строку кода в android / app / build.gradle
Если вы используете ProGuard, добавьте следующие правила в proguard-rules.pro:
Очистите сборку
iOS -
Отредактируйте файл ios / Podfile с помощью следующих строк кода -
Установите модуль Hermes
Вот и все. Теперь создайте свою сборку для iOS и Android и посмотрите скорость запуска приложений, использование памяти и, в частности, размер пакета.
Связанная статья - Реагировать на чистую архитектуру
2. Избегайте повторного рендеринга с помощью useMemo.
Хуки useMemo помогают разработчикам избежать повторного рендеринга дочерних компонентов для повышения производительности приложения React. useMemo используется для обработки мемоизации, то есть, если какой-либо компонент получает одни и те же реквизиты более одного раза, он будет использовать ранее кэшированные реквизиты и отображать представление JSX и возвращать компонент.
В приведенном ниже примере я взял FlatList и Button. В первый раз FlatList отображает идеально. Теперь, когда пользователь нажимает кнопку, новый setCount обновляет переменную состояния и весь компонент перезагружается с помощью FlatList, даже если значения не обновляются в массиве. Чтобы избежать этого, я обернул FlatListItem (UseMemoListItem) с помощью useMemo, поэтому useMemo проверяет, есть ли какие-либо изменения в реквизитах, тогда только он будет отображать JSX, иначе он вернет рендеринг и вернет предыдущие реквизиты представления.
Связанная статья - Пошаговая интеграция React Hooks
3. Кэшировать изображения
React Native Компонент изображения позволяет разработчикам отображать изображения в приложении, но есть несколько проблем, таких как -
- Номер рендеринга изображения (список продуктов - приложение для электронной торговли)
- Низкая производительность при кэшировании загрузки изображений
- Изображение мерцает
Чтобы решить эту проблему, React Native поддерживает встроенное кеширование для iOS путем включения следующих строк кода.
Но что делать для Android, есть популярная сторонняя библиотека с именем react-native-fast-image, которая идеально подходит для iOS и Android. Используя Fast Image, вы можете предоставить пользователям приложений быстрый рендеринг изображений, механизм кеширования и многое другое.
4. Используйте nativeDriver с анимированной библиотекой.
Мы используем анимацию в нашем приложении, но иногда она не работает должным образом, что влияет на производительность визуализации приложения. Чтобы избежать мерцания и запустить плавную анимацию, используйте useNativeDriver, который отправляет анимацию в собственный мост перед запуском анимации на компоненте. Это помогает выполнять анимацию в отдельном экземпляре javascript, что приводит к более плавной анимации.
Интегрировать очень просто - useNativeDriver: true.
5. Управление состоянием с помощью Redux / MobX / Apollo
Во многих случаях требуется управлять данными локально, что означает кэширование данных, которые сразу отображаются пользователю без прерывания всякий раз, когда пользователь возвращается в приложение. Мы используем AsyncStorage, локальное хранилище базы данных для хранения данных, и когда пользователь вернется в следующий раз / откроет приложение в следующий раз, мы извлекаем данные и сохраняем их в глобальных переменных для доступа в любом месте приложения.
Чтобы управлять этим на различных экранах и сохранять данные в различных массивах, объект Prefer Popular State Management Library, такой как Redux, Redux Rematch, MobX и Apollo. Эти библиотеки будут хранилищем | чесотка | получать данные для вас, и вы можете легко получить доступ ко всему приложению без каких-либо перерывов.
Связанная статья - Состояние дерева состояний MobX - Библиотека управления
6. Удалить журнал консоли.
Все мы используем console.log («Hello KPITENG!») Для отладки приложений. При развертывании приложения, если мы сохраним console.log (), это создаст проблемы с производительностью из-за потока javascript.
Чтобы удалить console.log в производственной среде, выполните простую установку и настройку.
Теперь измените файл .babelrc, чтобы удалить операторы консоли, как показано ниже:
7. Оптимизировать размер приложения для Android
Приложения для Android React Native содержат -
- Такие ресурсы, как изображения, шрифты и т. Д.
- Четыре разных двоичных файла, скомпилированных для разных архитектур ЦП
- Пакет Javascript с бизнес-логикой
- Другие встроенные файлы
Пока вы создаете приложение, оно объединит все это и создаст для вас двоичный файл. Чтобы оптимизировать сборку Android двоичного размера в React Native, добавив строку ниже
Обновите следующую строку в android / app / build.gradle
Если вы хотите извлечь четыре разных двоичных файла в соответствии с архитектурой вашего процессора, тогда
Спасибо за чтение блога!
