Коришћење мобилне апликације требало би да буде пријатно искуство, без икаквих фрустрирајућих одлагања. Као Реацт Нативе програмер, кључно је да оптимизујете своје апликације како би добро функционисале и биле једноставне за коришћење. Врхунске перформансе апликације захтевају да напишете чист и ефикасан код користећи праве алате и библиотеке.
Погледајте ове савете и технике за оптимизацију перформанси ваше Реацт Нативе апликације.
1. Смањите непотребно поновно приказивање помоћу усеМемо Хоок-а
Реацт Нативе рендерује компоненте користећи виртуелну ДОМ (ВДОМ) технологију. ВДОМ прати све промене компоненте апликације и поново приказује целу хијерархију погледа када сматра да је потребно. Овај процес је скуп, тако да би требало да избегавате непотребна ажурирања стања и реквизита компоненте.
Реацт библиотека обезбеђује усеМемо и усеЦаллбацк куке за решавање овог проблема у функционалним компонентама. Можете користити усеМемо куку за
запамтите резултујућу вредност ЈаваСцрипт функције које не желите да поново израчунате на сваком рендеру.Ево примера како можете да користите усеМемо кука:
увоз { усеМемо } из'реаговати';функцијаМиЦомпонент({ подаци }) {
// Функција цомпутеЕкпенсивеВалуе је скупо израчунавање које
// не треба поново да се израчунава при сваком рендеру.
конст скупаВалуе = усеМемо(() => цомпутеЕкпенсивеВалуе (подаци), [подаци]);
// Компонента може да користи меморисану вредност без поновног израчунавања
// то на сваком рендеру.
повратак{екпенсивеВалуе}</div>;
}
Враппинг тхе цомпутеЕкпенсивеВалуе функција унутар усеМемо кука меморише резултат функције. Тхе усеМемо кука може прихватити други аргумент као зависност. То значи да ће меморисана функција покренути појачање само када се ова зависност промени.
усеЦаллбацк је сличан усеМемо, али меморише функцију повратног позива уместо вредности. Ово може бити корисно за спречавање непотребног поновног приказивања подређених компоненти које покреће функција повратног позива која се преноси као проп.
2. Ефикасно руковање државним подацима
Лоше управљање стањем може довести до недоследности података, што доводи до неочекиваног понашања које може бити тешко пронаћи и поправити. Добро управљање стањем подразумева избегавање складиштења непотребних података у стању, што може успорити апликацију и отежати отклањање грешака. Важно је осигурати да је сво стање које чувате апсолутно неопходно да би се компонента приказала.
Други начин за ефикасно ажурирање стања је коришћење техника непроменљивости, попут оператора ширења или Објецт.ассигн() методом.
На пример:
увоз Реагујте, { усеСтате } из'реаговати';функцијаМиЦомпонент() {
конст [стате, сетСтате] = усеСтате({
рачунати: 0,
текст: 'Здраво'
});функцијахандлеЦлицк() {
сетСтате(превСтате => {
повратакОбјекат.ассигн({}, превСтате, { цоунт: превСтате.цоунт + 1 });
});
}
повратак (
У овом примеру, хандлеЦлицк функција користи сетСтате кука за ажурирање стања. Ипак, уместо директног модификовања објекта стања, он користи Објецт.ассигн() метод за креирање новог објекта који копира претходно стање са измењеним својством цоунт. Овај приступ омогућава Реацт-овом виртуелном ДОМ-у да поново прикаже компоненту када препозна да сте ажурирали стање.
Такође можете користити библиотеку за управљање стањем као што је Редук и уграђени контекстни АПИ да примени ову технику.
3. Имплементирајте систем за праћење учинка
Системи за праћење перформанси мобилних апликација (ПМС) су алати који вам омогућавају да мерите и анализирате перформансе ваших мобилних апликација. Они пружају функције као што су праћење у реалном времену, извештавање о паду, праћење мреже, метрика перформанси и понављање корисничке сесије. Коришћење система за праћење перформанси са вашом Реацт Нативе апликацијом ће вам омогућити да идентификујете уска грла у перформансама да бисте поправили и скалирали своју апликацију.
Ево листе неколико доступних ПМЦ алата.
- Реацт Нативе Дебуггер: Самостална апликација која вам омогућава да отклањате грешке и прегледате стање ваше Реацт Нативе апликације. Такође укључује монитор перформанси који ће вам помоћи да идентификујете и решите проблеме са перформансама.
- Реацт Нативе Профилер: Овај уграђени алат за праћење перформанси вам омогућава да гледате перформансе ваше апликације мерењем времена које је потребно да се свака компонента прикаже.
- Флиппер: платформа за развој мобилних апликација са монитором перформанси који вам може помоћи да идентификујете и решите проблеме са перформансама.
- Фиребасе Перформанце Мониторинг: Фиребасе алат за праћење перформанси који вам омогућава да пратите перформансе ваше апликације на различитим уређајима и платформама.
4. Уклоните изјаве Цонсоле.лог
Када се наредба цонсоле.лог покрене, она шаље поруку ЈаваСцрипт машини да евидентира поруку на конзоли. ЈС мотору је тада потребно време да обради и прикаже поруку.
Превише наредби конзоле у вашем коду ће успорити његово извршавање и узроковати кашњење у перформансама. Ово може бити посебно проблематично када ваша апликација ради на уређају са ограниченим ресурсима, као што је јефтин мобилни уређај.
5. Изградите ефикасан навигациони систем
Добар систем за навигацију ће побољшати укупну структуру ваше Реацт Нативе апликације, олакшавајући одржавање, ажурирање функција и ефикасно преношење података о стању. Поред тога, чини пребацивање између више екрана у вашој апликацији много лакшим, побољшавајући корисничко искуство.
Требало би да узмете у обзир факторе као што је прави образац навигације (засновано на картицама, засновано на стеку, засновано на фиокама, итд.) који одговара вашој апликацији. Узмите у обзир број екрана које очекујете у својој апликацији и начин на који ћете преносити податке о стању између њих.
Кеширање је користан метод за развој поузданог навигационог система. Кеширање вам омогућава да сачувате стање екрана или компоненте када их корисник напусти, а затим их вратите када се врате. Ово помаже да се минимизира количина података коју треба да учитате и колико пута је потребно да се поново прикаже.
Реацт Нативе има неколико доступних библиотека за навигацију, као што су Реацт Навигатион и Реацт Нативе Навигатион. Можете их користити за имплементацију неких од ових уобичајених образаца навигације у вашој апликацији.
6. Смањите величину апликације помоћу дељења кода и лењег учитавања
Величина апликације је важна за оптимизоване перформансе јер може да утиче на аспекте корисничког искуства, као што су почетно време учитавања, употреба меморије и простор за складиштење.
Подела кода и лењо учитавање су технике које могу смањити величину ваше Реацт Нативе апликације и побољшати перформансе.
Подела кода је процес разбијања велике базе ЈаваСцрипт кода на мање „скупове“ којима се лакше управља. Ово може значајно смањити почетно време учитавања апликације.
Лено учитавање је техника која вам омогућава да учитавате компоненте док корисник дође до њих, а не при покретању. Ово може помоћи у смањењу количине меморије коју ваша апликација користи и побољшању укупних перформанси.
Зашто је оптимизација перформанси важна
Оптимизација перформанси је кључна за успех било које мобилне апликације. Спора апликација може довести до лошег корисничког искуства и на крају резултирати ниским ангажовањем и задржавањем.
Ови трикови су само неколико начина на које можете да користите да бисте обезбедили пријатно искуство за корисничку базу ваше апликације.
