Использование мобильного приложения должно приносить удовольствие, без каких-либо неприятных задержек. Для разработчика React Native крайне важно оптимизировать свои приложения, чтобы они хорошо работали и были просты в использовании. Для достижения максимальной производительности приложения необходимо писать чистый и эффективный код с использованием правильных инструментов и библиотек.
Взгляните на эти советы и методы, чтобы оптимизировать производительность вашего приложения React Native.
1. Уменьшите количество ненужных повторных рендеров с помощью хука useMemo
React Native визуализирует компоненты с использованием технологии Virtual DOM (VDOM). VDOM отслеживает все изменения в компоненте приложения и повторно отображает всю иерархию представлений, когда считает это необходимым. Этот процесс является дорогостоящим, поэтому вам следует избегать ненужных обновлений состояния и свойств компонента.
Библиотека React предоставляет useMemo и использоватьОбратный звонок крючки для решения этой проблемы в функциональных компонентах. Вы можете использовать хук useMemo для запомнить результирующее значение функции JavaScript которые вы не хотите пересчитывать при каждом рендеринге.
Вот пример того, как вы можете использовать useMemo крюк:
Импортировать { useMemo } от«реагировать»;функцияМой Компонент({ данные }) {
// Функция calculateExpensiveValue — это дорогостоящее вычисление, которое
// не нужно пересчитывать при каждом рендеринге.
константа дорогое значение = useMemo(() => вычислитьExpensiveValue (данные), [данные]);
// Компонент может использовать запомненное значение без повторного вычисления
// это при каждом рендере.
возвращаться{дорогое значение}</div>;
}
Обертывание вычислитьЭкспенсивевалуе функция внутри useMemo hook запоминает результат функции. useMemo hook может принимать второй аргумент в качестве зависимости. Это означает, что мемоизированная функция будет работать только при изменении этой зависимости.
использоватьОбратный звонок похож на useMemo, но запоминает функцию обратного вызова вместо значения. Это может быть полезно для предотвращения ненужного повторного рендеринга дочерних компонентов, вызванного функцией обратного вызова, переданной как свойство.
2. Эффективная обработка данных состояния
Плохое управление состоянием может привести к несогласованности данных, что приведет к неожиданному поведению, которое бывает трудно отследить и исправить. Надлежащее управление состоянием заключается в том, чтобы избегать хранения ненужных данных в состоянии, что может замедлить работу приложения и усложнить его отладку. Важно убедиться, что все состояние, которое вы храните, абсолютно необходимо для отображения компонента.
Еще один способ эффективно обновлять состояние — использовать методы неизменности, такие как оператор расширения или оператор расширения. Объект.назначить() метод.
Например:
Импортировать Реагировать, {useState} от«реагировать»;функцияМой Компонент() {
константа [состояние, setState] = useState({
считать: 0,
текст: 'Привет'
});функцияручкаклик() {
установить состояние (предыдущее состояние => {
возвращатьсяОбъект.assign({}, prevState, { count: prevState.count + 1 });
});
}
возвращаться (
В этом примере ручкаклик функция использует setState ловушка для обновления состояния. Тем не менее, вместо прямого изменения объекта состояния он использует Объект.назначить() метод для создания нового объекта, который копирует предыдущее состояние с измененным свойством count. Этот подход позволяет виртуальному DOM React повторно отображать компонент, когда он распознает, что вы обновили состояние.
Вы также можете использовать библиотеку управления состоянием, такую как Redux и встроенный контекстный API для реализации этой техники.
3. Внедрить систему мониторинга производительности
Системы мониторинга производительности мобильных приложений (PMS) — это инструменты, которые позволяют измерять и анализировать производительность ваших мобильных приложений. Они предоставляют такие функции, как мониторинг в реальном времени, отчеты о сбоях, мониторинг сети, показатели производительности и воспроизведение сеанса пользователя. Использование системы мониторинга производительности с вашим приложением React Native позволит вам определить узкие места в производительности, чтобы исправить и масштабировать ваше приложение.
Вот список нескольких доступных инструментов PMC.
- React Native Debugger: отдельное приложение, которое позволяет отлаживать и проверять состояние вашего приложения React Native. Он также включает монитор производительности, помогающий выявлять и устранять проблемы с производительностью.
- React Native Profiler: этот встроенный инструмент мониторинга производительности позволяет вам наблюдать за производительностью вашего приложения, измеряя время, необходимое для рендеринга каждого компонента.
- Flipper: платформа для разработки мобильных приложений с монитором производительности, который может помочь вам выявить и исправить проблемы с производительностью.
- Мониторинг производительности Firebase: инструмент мониторинга производительности, предоставляемый Firebase, который позволяет отслеживать производительность вашего приложения на разных устройствах и платформах.
4. Удалить операторы Console.log
Когда оператор console.log запускается, он отправляет сообщение механизму JavaScript для регистрации сообщения на консоли. Затем движку JS требуется время для обработки и отображения сообщения.
Слишком большое количество операторов консоли в вашем коде замедлит его выполнение и приведет к снижению производительности. Это может быть особенно проблематично, когда ваше приложение работает на устройстве с ограниченными ресурсами, например на недорогих мобильных устройствах.
5. Создайте эффективную навигационную систему
Хорошая система навигации улучшит общую структуру вашего приложения React Native, упростив его обслуживание, обновление функций и эффективную передачу данных о состоянии. Кроме того, это значительно упрощает переключение между несколькими дисплеями в вашем приложении, улучшая взаимодействие с пользователем.
Вы должны учитывать такие факторы, как правильный шаблон навигации (на основе вкладок, на основе стека, на основе ящиков и т. д.), который подходит для вашего приложения. Примите во внимание количество экранов, которые вы ожидаете в своем приложении, и то, как вы будете передавать данные о состоянии между ними.
Кэширование — полезный метод разработки надежной навигационной системы. Кэширование позволяет сохранять состояние экрана или компонента, когда пользователь покидает его, а затем восстанавливать его, когда он возвращается. Это помогает свести к минимуму объем данных, которые необходимо загрузить, и количество повторных рендерингов.
В React Native есть несколько библиотек для навигации, таких как React Navigation и React Native Navigation. Вы можете использовать их для реализации некоторых из этих распространенных шаблонов навигации в своем приложении.
6. Уменьшите размер приложения с помощью разделения кода и отложенной загрузки
Размер приложения важен для оптимизации производительности, поскольку он может повлиять на аспекты взаимодействия с пользователем, такие как время первоначальной загрузки, использование памяти и место для хранения.
Разделение кода и отложенная загрузка — это методы, которые могут уменьшить размер вашего приложения React Native и повысить производительность.
Разделение кода — это процесс разбиения большой базы кода JavaScript на более мелкие, более управляемые «связки». Это может значительно сократить время первоначальной загрузки приложения.
Ленивая загрузка — это метод, позволяющий загружать компоненты по мере того, как пользователь переходит к ним, а не при запуске. Это может помочь уменьшить объем памяти, используемой вашим приложением, и повысить общую производительность.
Почему важна оптимизация производительности
Оптимизация производительности имеет решающее значение для успеха любого мобильного приложения. Медленное приложение может привести к плохому взаимодействию с пользователем и, в конечном итоге, к низкому вовлечению и удержанию.
Эти приемы — лишь несколько способов, которые вы можете использовать, чтобы обеспечить приятное взаимодействие с пользовательской базой вашего приложения.