Uporaba mobilne aplikacije bi morala biti prijetna izkušnja, brez frustrirajočih zamud. Kot razvijalec React Native je ključnega pomena, da optimizirate svoje aplikacije, tako da dobro delujejo in so preproste za uporabo. Največja zmogljivost aplikacije zahteva pisanje čiste in učinkovite kode z uporabo pravih orodij in knjižnic.
Oglejte si te nasvete in tehnike za optimizacijo delovanja vaše aplikacije React Native.
1. Zmanjšajte nepotrebne ponovne upodobitve z useMemo Hook
React Native upodablja komponente s tehnologijo Virtual DOM (VDOM). VDOM spremlja vse spremembe komponente aplikacije in po potrebi ponovno upodobi celotno hierarhijo pogleda. Ta postopek je drag, zato se izogibajte nepotrebnim posodobitvam stanja in rekvizitov komponente.
Knjižnica React ponuja useMemo in useCallback kljuke za rešitev tega problema v funkcionalnih komponentah. Kavelj useMemo lahko uporabite za
zapomni dobljeno vrednost funkcije JavaScript ki jih ne želite znova izračunati pri vsakem upodabljanju.Tukaj je primer, kako lahko uporabite useMemo kavelj:
uvoz {useMemo} od'reagirati';funkcijoMyComponent({ podatki }) {
// Funkcija computeExpensiveValue je drag izračun, ki
// ni treba znova izračunati pri vsakem upodabljanju.
konst dragaVrednost = useMemo(() => computeExpensiveValue (podatki), [podatki]);
// Komponenta lahko uporablja memoizirano vrednost brez ponovnega računanja
// to na vsakem upodabljanju.
vrnitev{expensiveValue}</div>;
}
Zavijanje computeExpensiveValue funkcijo znotraj useMemo hook zapomni rezultat funkcije. The useMemo hook lahko sprejme drugi argument kot odvisnost. To pomeni, da bo memoizirana funkcija zagnala dobiček samo, ko se ta odvisnost spremeni.
useCallback je podoben useMemo, vendar si zapomni funkcijo povratnega klica namesto vrednosti. To je lahko uporabno za preprečevanje nepotrebnega ponovnega upodabljanja podrejenih komponent, ki jih sproži funkcija povratnega klica, posredovana kot podpora.
2. Učinkovito ravnanje s podatki o stanju
Slabo upravljanje stanja lahko privede do nedoslednosti podatkov, kar povzroči nepričakovano vedenje, ki ga je težko izslediti in popraviti. Dobro upravljanje stanja vključuje izogibanje shranjevanju nepotrebnih podatkov v stanju, ki lahko upočasnijo aplikacijo in otežijo odpravljanje napak. Pomembno je zagotoviti, da so vsa stanja, ki jih shranite, nujno potrebna za upodabljanje komponente.
Drug način za učinkovito posodabljanje stanja je uporaba tehnik nespremenljivosti, kot je operator razpršitve ali Object.assign() metoda.
Na primer:
uvoz Odziv, {useState} od'reagirati';funkcijoMyComponent() {
konst [stanje, setState] = useState({
štetje: 0,
besedilo: 'Zdravo'
});funkcijohandleClick() {
setState(prevState => {
vrnitevObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
vrnitev (
V tem primeru je handleClick funkcija uporablja setState kavelj za posodobitev stanja. Kljub temu namesto neposrednega spreminjanja objekta stanja uporablja Object.assign() za ustvarjanje novega predmeta, ki kopira prejšnje stanje s spremenjeno lastnostjo štetja. Ta pristop omogoča Reactovemu virtualnemu DOM-u, da ponovno upodablja komponento, ko prepozna, da ste posodobili stanje.
Uporabite lahko tudi knjižnico za upravljanje stanja, kot sta Redux in vgrajeni kontekstni API za izvajanje te tehnike.
3. Izvedite sistem za spremljanje uspešnosti
Sistemi za spremljanje delovanja mobilnih aplikacij (PMS) so orodja, ki vam omogočajo merjenje in analizo učinkovitosti vaših mobilnih aplikacij. Zagotavljajo funkcije, kot so spremljanje v realnem času, poročanje o zrušitvah, spremljanje omrežja, meritve zmogljivosti in predvajanje uporabniške seje. Uporaba sistema za spremljanje zmogljivosti z vašo aplikacijo React Native vam bo omogočila, da prepoznate ozka grla v zmogljivosti, da popravite in prilagodite svojo aplikacijo.
Tukaj je seznam več orodij PMC, ki so na voljo.
- React Native Debugger: samostojna aplikacija, ki vam omogoča odpravljanje napak in pregledovanje stanja vaše aplikacije React Native. Vključuje tudi nadzornik zmogljivosti, ki vam pomaga prepoznati in odpraviti težave z zmogljivostjo.
- React Native Profiler: To vgrajeno orodje za spremljanje zmogljivosti vam omogoča spremljanje učinkovitosti vaše aplikacije z merjenjem časa, ki je potreben za upodabljanje posamezne komponente.
- Flipper: platforma za razvoj mobilnih aplikacij z monitorjem zmogljivosti, ki vam lahko pomaga prepoznati in odpraviti težave z zmogljivostjo.
- Nadzor zmogljivosti Firebase: orodje za spremljanje učinkovitosti, ki ga nudi Firebase in vam omogoča sledenje učinkovitosti vaše aplikacije na različnih napravah in platformah.
4. Odstranite izjave Console.log
Ko se zažene stavek console.log, pošlje sporočilo motorju JavaScript, da sporočilo zabeleži v konzolo. Motor JS nato potrebuje čas za obdelavo in prikaz sporočila.
Preveč stavkov konzole v vaši kodi bo upočasnilo njeno izvajanje in povzročilo zamude pri delovanju. To je lahko še posebej problematično, če se vaša aplikacija izvaja v napravi z omejenimi viri, kot je mobilna naprava nižjega cenovnega razreda.
5. Zgradite učinkovit navigacijski sistem
Dober navigacijski sistem bo izboljšal celotno strukturo vaše aplikacije React Native, kar bo olajšalo vzdrževanje, posodabljanje funkcij in učinkovito posredovanje podatkov o stanju. Poleg tega omogoča veliko lažje preklapljanje med več zasloni v vaši aplikaciji, kar izboljša uporabniško izkušnjo.
Upoštevati morate dejavnike, kot je pravi navigacijski vzorec (na podlagi zavihkov, na podlagi sklada, na podlagi predalov itd.), ki ustreza vaši aplikaciji. Upoštevajte število zaslonov, ki jih pričakujete v svoji aplikaciji, in kako boste posredovali podatke o stanju med njimi.
Predpomnjenje je uporabna metoda za razvoj zanesljivega navigacijskega sistema. Predpomnjenje vam omogoča, da shranite stanje zaslona ali komponente, ko ga uporabnik zapusti, nato pa ga obnovite, ko se vrne. To pomaga zmanjšati količino podatkov, ki jih morate naložiti, in število ponovnih upodobitev.
React Native ima na voljo več knjižnic za navigacijo, kot sta React Navigation in React Native Navigation. Uporabite jih lahko za implementacijo nekaterih od teh pogostih vzorcev krmarjenja v svoji aplikaciji.
6. Zmanjšajte velikost aplikacije z delitvijo kode in lenim nalaganjem
Velikost aplikacije je pomembna za optimizirano delovanje, saj lahko vpliva na vidike uporabniške izkušnje, kot so začetni čas nalaganja, uporaba pomnilnika in prostor za shranjevanje.
Razdelitev kode in leno nalaganje sta tehniki, ki lahko zmanjšata velikost vaše aplikacije React Native in izboljšata delovanje.
Razdelitev kode je postopek razčlenitve velike baze kode JavaScript na manjše, bolj obvladljive "svežnje". To lahko bistveno skrajša začetni čas nalaganja aplikacije.
Leno nalaganje je tehnika, ki vam omogoča nalaganje komponent, ko se uporabnik pomakne do njih in ne ob zagonu. To lahko pomaga zmanjšati količino pomnilnika, ki ga uporablja vaša aplikacija, in izboljša splošno delovanje.
Zakaj je optimizacija delovanja pomembna
Optimizacija delovanja je ključnega pomena za uspeh katere koli mobilne aplikacije. Počasna aplikacija lahko povzroči slabo uporabniško izkušnjo in na koncu povzroči nizko angažiranost in zadržanje.
Ti triki so le nekateri načini, ki jih lahko uporabite, da zagotovite prijetno izkušnjo za bazo uporabnikov vaše aplikacije.
