Používanie mobilnej aplikácie by malo byť príjemným zážitkom bez frustrujúcich zdržaní. Ako vývojár React Native je dôležité, aby ste optimalizovali svoje aplikácie, aby dobre fungovali a ľahko sa používali. Špičkový výkon aplikácie vyžaduje, aby ste písali čistý a efektívny kód pomocou správnych nástrojov a knižníc.
Pozrite si tieto tipy a techniky na optimalizáciu výkonu vašej aplikácie React Native.
1. Znížte zbytočné opätovné vykresľovanie pomocou funkcie useMemo Hook
React Native vykresľuje komponenty pomocou technológie Virtual DOM (VDOM). VDOM sleduje všetky zmeny komponentu aplikácie a znova vykresľuje celú hierarchiu zobrazenia, keď to považuje za potrebné. Tento proces je drahý, takže by ste sa mali vyhnúť zbytočným aktualizáciám stavu a rekvizít komponentu.
Knižnica React poskytuje useMemo a použite spätné volanie háčiky na vyriešenie tohto problému vo funkčných komponentoch. Môžete použiť háčik použiť na
zapamätať si výslednú hodnotu funkcie JavaScript že nechcete prepočítavať pri každom vykreslení.Tu je príklad, ako môžete použiť useMemo háčik:
importovať { useMemo } od'reagovať';funkciuMyComponent({ údaje }) {
// Funkcia computeExpensiveValue je nákladný výpočet
// nie je potrebné prepočítavať pri každom vykreslení.
konšt drahaValue = useMemo(() => computeExpensiveValue (údaje), [údaje]);
// Komponent môže použiť zapamätanú hodnotu bez opätovného výpočtu
// to na každom renderi.
vrátiť{expensiveValue}</div>;
}
Balenie computeExpensiveValue funkcia vo vnútri useMemo hák si zapamätá výsledok funkcie. The useMemo hook môže prijať druhý argument ako závislosť. To znamená, že funkcia uložená v pamäti sa spustí len vtedy, keď sa táto závislosť zmení.
použite spätné volanie je podobný useMemo, ale namiesto hodnoty si zapamätá funkciu spätného volania. To môže byť užitočné na zabránenie zbytočnému opätovnému vykresľovaniu podradených komponentov spúšťaným funkciou spätného volania odovzdanou ako rekvizita.
2. Efektívne narábanie s údajmi o stave
Zlé riadenie stavu môže viesť k nekonzistentnosti údajov, čo vedie k neočakávanému správaniu, ktoré môže byť ťažké vystopovať a opraviť. Dobrá správa stavu zahŕňa vyhýbanie sa ukladaniu nepotrebných údajov v stave, čo môže spomaliť aplikáciu a sťažiť jej ladenie. Je dôležité zabezpečiť, aby všetky uložené stavy boli absolútne nevyhnutné na vykreslenie komponentu.
Ďalším spôsobom, ako efektívne aktualizovať stav, je použiť techniky nemennosti, ako je operátor šírenia alebo Object.assign() metóda.
Napríklad:
importovať Reagovať, { useState } od'reagovať';funkciuMyComponent() {
konšt [state, setState] = useState({
počítať: 0,
text: 'Ahoj'
});funkciuhandleClick() {
setState(prevState => {
vrátiťObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
vrátiť (
V tomto príklade handleClick funkcia využíva setState hák na aktualizáciu stavu. Napriek tomu namiesto priamej úpravy objektu stavu používa Object.assign() metóda na vytvorenie nového objektu, ktorý skopíruje predchádzajúci stav s upravenou vlastnosťou count. Tento prístup umožňuje virtuálnemu DOM Reactu znova vykresliť komponent, keď rozpozná, že ste aktualizovali stav.
Môžete tiež použiť knižnicu správy stavu, ako je Redux a vstavané kontextové API implementovať túto techniku.
3. Implementujte systém monitorovania výkonu
Systémy monitorovania výkonu mobilných aplikácií (PMS) sú nástroje, ktoré vám umožňujú merať a analyzovať výkon vašich mobilných aplikácií. Poskytujú funkcie, ako je monitorovanie v reálnom čase, hlásenie o zlyhaní, monitorovanie siete, metriky výkonu a prehrávanie relácie používateľa. Používanie systému monitorovania výkonu s vašou aplikáciou React Native vám umožní identifikovať prekážky výkonu na opravu a škálovanie vašej aplikácie.
Tu je zoznam niekoľkých dostupných nástrojov PMC.
- React Native Debugger: Samostatná aplikácia, ktorá vám umožňuje ladiť a kontrolovať stav vašej aplikácie React Native. Obsahuje tiež monitor výkonu, ktorý vám pomôže identifikovať a opraviť problémy s výkonom.
- React Native Profiler: Tento vstavaný nástroj na monitorovanie výkonu vám umožňuje sledovať výkon vašej aplikácie meraním času potrebného na vykreslenie jednotlivých komponentov.
- Flipper: Platforma na vývoj mobilných aplikácií s monitorom výkonu, ktorý vám môže pomôcť identifikovať a opraviť problémy s výkonom.
- Firebase Performance Monitoring: Nástroj na monitorovanie výkonu poskytovaný službou Firebase, ktorý vám umožňuje sledovať výkon vašej aplikácie na rôznych zariadeniach a platformách.
4. Odstráňte príkazy Console.log
Keď sa spustí príkaz console.log, odošle správu do nástroja JavaScript, aby správu zaprotokoloval do konzoly. Spracovanie a zobrazenie správy potom trvá JS engine.
Príliš veľa príkazov konzoly vo vašom kóde spomalí jeho vykonávanie a spôsobí oneskorenie výkonu. To môže byť obzvlášť problematické, keď vaša aplikácia beží na zariadení s obmedzenými zdrojmi, ako je napríklad mobilné zariadenie nižšej kategórie.
5. Vybudujte efektívny navigačný systém
Dobrý navigačný systém zlepší celkovú štruktúru vašej aplikácie React Native, čím uľahčí údržbu, aktualizáciu funkcií a efektívne odovzdávanie údajov o stave. Navyše výrazne zjednodušuje prepínanie medzi viacerými displejmi vo vašej aplikácii, čím zlepšuje používateľskú skúsenosť.
Mali by ste zvážiť faktory, ako je správny vzor navigácie (základný, zásobníkový, zásuvkový atď.), ktorý vyhovuje vašej aplikácii. Berte do úvahy počet obrazoviek, ktoré vo svojej aplikácii očakávate, a spôsob, akým medzi nimi budete odovzdávať údaje o stave.
Ukladanie do vyrovnávacej pamäte je užitočná metóda na vývoj spoľahlivého navigačného systému. Ukladanie do vyrovnávacej pamäte vám umožňuje uložiť stav obrazovky alebo komponentu, keď ich používateľ opustí, a potom ich obnoviť, keď sa vráti. Pomáha to minimalizovať množstvo údajov, ktoré musíte načítať, a počet opakovaní vykreslenia.
React Native má na navigáciu k dispozícii niekoľko knižníc, ako napríklad React Navigation a React Native Navigation. Môžete ich použiť na implementáciu niektorých z týchto bežných navigačných vzorov vo vašej aplikácii.
6. Znížte veľkosť aplikácie pomocou rozdelenia kódu a lenivého načítania
Veľkosť aplikácie je dôležitá pre optimalizovaný výkon, pretože môže ovplyvniť aspekty používateľského prostredia, ako je počiatočná doba načítania, využitie pamäte a úložný priestor.
Rozdelenie kódu a lenivé načítanie sú techniky, ktoré môžu zmenšiť veľkosť vašej aplikácie React Native a zlepšiť výkon.
Rozdelenie kódu je proces rozdelenia veľkej základne kódu JavaScript na menšie, lepšie spravovateľné „balíky“. To môže výrazne skrátiť počiatočný čas načítania aplikácie.
Lenivé načítanie je technika, ktorá vám umožňuje načítať komponenty, keď k nim používateľ prejde, a nie pri spustení. Môže to pomôcť znížiť množstvo pamäte, ktorú vaša aplikácia využíva, a zlepšiť celkový výkon.
Prečo je optimalizácia výkonu dôležitá
Optimalizácia výkonu je kľúčová pre úspech akejkoľvek mobilnej aplikácie. Pomalá aplikácia môže viesť k zlej používateľskej skúsenosti a v konečnom dôsledku viesť k nízkej interakcii a udržaniu.
Tieto triky sú len niekoľkými spôsobmi, ktoré môžete využiť na zabezpečenie príjemného zážitku pre používateľskú základňu vašej aplikácie.