Все мы слышали или сталкивались с одной из распространенных проблем при работе с React Native — проблемами производительности. По мере роста проекта проблемы с производительностью могут становиться все больше и больше. К счастью, мы можем сделать несколько вещей, чтобы улучшить производительность и оптимизировать наши приложения React Native. Сегодня мы обсудим эти методы оптимизации.
Изображения
Одна из распространенных проблем производительности может быть связана с большими файлами изображений или большим количеством изображений в нашем приложении. Мы можем оптимизировать эти изображения с помощью замечательной библиотеки -react-native-fast-image.
Компонент Image в React Native по большей части обрабатывает кэширование изображений подобно браузерам. Если сервер возвращает правильные заголовки управления кэшем для изображений, вы, как правило, получаете такое же поведение встроенного кэширования, как и в браузере. Даже в этом случае многие люди заметили:
- Мерцание.
- Пропуски кэша.
- Низкопроизводительная загрузка из кэша.
- Низкая производительность в целом.
FastImage — это замена изображения, которая решает эти проблемы. FastImage — это обертка вокруг SDWebImage (iOS) и Glide (Android). Ниже перечислены его преимущества:
- Агрессивное кэширование изображений.
- Добавление заголовков авторизации.
- Приоритет изображений.
- Предварительная загрузка изображений.
- Поддержка GIF.
- Радиус границы.
Другие моменты, которые следует учитывать при использовании изображений,
1. Используйте изображения меньшего размера.
2. Используйте PNG, а не JPG.
3. Конвертируйте изображения в формат WebP.
Избегайте ненужных повторных рендеров
Еще одна распространенная проблема в приложениях React и React Native — чрезмерные/ненужные повторные рендеринги, которые могут сильно снижать производительность. Чтобы решить эту проблему, мы можем использовать памятку из React Native вместе с react-fast-compare. Когда эти два компонента объединены вместе, вы получаете лучшую производительность и избегаете повторных рендерингов, если в компоненте нет изменений.
React Fast Compare обеспечивает самое быстрое глубокое равное сравнение для React. Также очень быстрое глубокое сравнение общего назначения. Отлично подходит для React.memo и shouldComponentUpdate.
Пример:
import React, { memo } from 'react';
import equals from 'react-fast-compare';
const ExpensiveComponent = () => <></>
export default memo(ExpensiveComponent, equals);
Запоминание обратных вызовов
Еще одна важная техника оптимизации — избегать встроенных функций и создавать функции обратного вызова с помощью useCallback из React. Когда функции запоминаются, они не будут создаваться заново, если не произойдет изменений в их зависимостях. Эта техника улучшает производительность всего приложения при правильном использовании, но не стоит использовать ее чрезмерно в тех местах, где она не требуется.
Пример:
import React, { useCallback } from 'react';
const App = () => {
//Only recreated if a or b changes.
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
useEffect(() => {
memoizedCallback();
}, [memoizedCallback]);
return <></>;
};
export default App;
Флэтлист
Любите Flatlist из React Native? Но у вас были проблемы с его оптимизацией для больших списков, где производительность постепенно падала.
Что ж, пришло время адаптироваться к Flashlist, потому что он построен поверх Flatlist, с улучшенной производительностью и другими преимуществами.
Посмотрите, что написано в их документации:
Аналогичный реквизит.
Мгновенная производительность.
Даже имея схожие реквизиты с React Native FlatList, FlashList перерабатывает компоненты под капотом, чтобы максимизировать производительность.
И, честно говоря, они сдержали свое обещание. Они улучшили тонну производительности по сравнению с использованием нативного Flatlist.
Улучшение времени запуска
Hermes — это JavaScript-движок с открытым исходным кодом, оптимизированный для React Native. Мы можем использовать Hermes для улучшения времени запуска, поскольку его использование приведет к снижению использования памяти и уменьшению размера приложения. Всегда следите за тем, чтобы использовать последнюю версию RN при использовании Hermes.
Удалите все консольные операторы
Консольные утверждения необходимы для отладки кода JavaScript, но они предназначены только для целей разработки. Эти утверждения могут вызвать серьезные проблемы с производительностью в вашем приложении React Native, если их не удалить перед компоновкой.
Заключение:
Оптимизация приложений React Native — это один из важнейших этапов, который необходимо выполнить каждому разработчику для создания приложений производственного уровня. Это руководство должно дать вам лучшее представление об оптимизации вашего проекта.
Спасибо, что дочитали до конца.
Надеюсь, этот пост был полезен для улучшения вашего путешествия разработчика!
Первоначально опубликовано на: https://blogs.appymango.com/blogs/62db7ccd1fb436d95d0149f8