Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Използването на мобилно приложение трябва да бъде приятно изживяване, без никакви разочароващи забавяния. Като разработчик на React Native е изключително важно да оптимизирате приложенията си, така че да работят добре и да са лесни за използване. Пиковата производителност на приложението изисква да пишете чист и ефективен код, като използвате правилните инструменти и библиотеки.

Разгледайте тези съвети и техники, за да оптимизирате работата на вашето приложение React Native.

1. Намалете ненужните повторни изобразявания с useMemo Hook

React Native изобразява компоненти с помощта на технологията Virtual DOM (VDOM). VDOM следи всички промени в компонента на приложението и рендерира цялата йерархия на изгледа, когато сметне за необходимо. Този процес е скъп, така че трябва да избягвате ненужни актуализации на състоянието и реквизитите на компонента.

instagram viewer

Библиотеката React предоставя useMemo и useCallback куки за решаване на този проблем във функционални компоненти. Можете да използвате куката useMemo за запомнете получената стойност на функция на JavaScript че не искате да изчислявате отново при всяко рендиране.

Ето пример за това как можете да използвате useMemo кука:

импортиране {useMemo} от"реагира";
функцияMyComponent({ данни }) {
// Функцията computeExpensiveValue е скъпо изчисление, което
// не е необходимо да се изчислява повторно при всяко изобразяване.
конст dragValue = useMemo(() => computeExpensiveValue (данни), [данни]);
// Компонентът може да използва запаметената стойност без повторно изчисление 
// го при всяко изобразяване.
връщане
{expensiveValue}</div>;
}

Опаковане на computeExpensiveValue функция вътре в useMemo hook запомня резултата от функцията. The useMemo hook може да приеме втори аргумент като зависимост. Това означава, че мемоизираната функция ще изпълнява печалба само когато тази зависимост се промени.

useCallback е подобен на useMemo, но запаметява функция за обратно извикване вместо стойност. Това може да бъде полезно за предотвратяване на ненужно повторно изобразяване на дъщерни компоненти, задействано от функция за обратно извикване, предадена като проп.

2. Ефективна обработка на данни за състоянието

Лошото управление на състоянието може да доведе до несъответствия в данните, водещи до неочаквано поведение, което може да бъде трудно за проследяване и коригиране. Доброто управление на състоянието включва избягване на съхраняването на ненужни данни в състоянието, което може да забави приложението и да затрудни отстраняването на грешки. Важно е да се гарантира, че всички състояния, които съхранявате, са абсолютно необходими, за да може компонентът да се изобрази.

Друг начин за ефективно актуализиране на състоянието е използването на техники за неизменност, като оператора за разпространение или Object.assign() метод.

Например:

импортиране Реагирайте, {useState} от"реагира";
функцияMyComponent() {
конст [състояние, setState] = useState({
 броя: 0,
 текст: 'Здравейте'
 });


функцияhandleClick() {
 setState(предишно състояние => {
връщанеОбект.assign({}, prevState, { count: prevState.count + 1 });
 });
 }
връщане (

В този пример, handleClick функцията използва setState кука за актуализиране на състоянието. И все пак, вместо директно да модифицира обекта на състоянието, той използва Object.assign() метод за създаване на нов обект, който копира предишното състояние с модифицирано свойство 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 на по-малки, по-управляеми „пакети“. Това може значително да намали първоначалното време за зареждане на приложението.

Мързеливото зареждане е техника, която ви позволява да зареждате компоненти, докато потребителят навигира към тях, а не при стартиране. Това може да помогне за намаляване на количеството памет, използвано от вашето приложение, и да подобри цялостната производителност.

Защо оптимизирането на производителността е важно

Оптимизирането на производителността е от решаващо значение за успеха на всяко мобилно приложение. Бавното приложение може да доведе до лошо потребителско изживяване и в крайна сметка да доведе до ниска ангажираност и задържане.

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