Korištenje mobilne aplikacije trebalo bi biti ugodno iskustvo, bez frustrirajućih odgoda. Kao React Native programer, ključno je da optimizirate svoje aplikacije kako bi dobro radile i bile jednostavne za korištenje. Vrhunska izvedba aplikacije zahtijeva pisanje čistog i učinkovitog koda pomoću pravih alata i biblioteka.
Pogledajte ove savjete i tehnike za optimiziranje performansi vaše aplikacije React Native.
1. Smanjite nepotrebno ponovno renderiranje uz useMemo Hook
React Native renderira komponente pomoću tehnologije Virtual DOM (VDOM). VDOM prati sve promjene na komponenti aplikacije i ponovno prikazuje cijelu hijerarhiju pogleda kada to smatra potrebnim. Ovaj je proces skup, stoga biste trebali izbjegavati nepotrebna ažuriranja stanja i rekvizita komponente.
React biblioteka pruža useMemo i useCallback kuke za rješavanje ovog problema u funkcionalnim komponentama. Možete koristiti useMemo kuku za
memorirati rezultirajuću vrijednost JavaScript funkcije koje ne želite ponovno izračunavati na svakom renderu.Evo primjera kako možete koristiti useMemo kuka:
uvoz {useMemo} iz'reagirati';funkcijaMoja komponenta({ podaci }) {
// Funkcija computeExpensiveValue skupo je izračunavanje koje
// ne treba se ponovno izračunavati pri svakom prikazu.
konst skupaVrijednost = useMemo(() => computeExpensiveValue (podaci), [podaci]);
// Komponenta može koristiti memoiziranu vrijednost bez ponovnog računanja
// to na svakom renderu.
povratak{expensiveValue}</div>;
}
Zamatanje computeExpensiveValue funkcija unutar useMemo kuka memoizira rezultat funkcije. The useMemo kuka može prihvatiti drugi argument kao ovisnost. To znači da će memoizirana funkcija pokrenuti dobitak samo kada se ova ovisnost promijeni.
useCallback je sličan useMemo, ali memoizira funkciju povratnog poziva umjesto vrijednosti. To može biti korisno za sprječavanje nepotrebnog ponovnog renderiranja podređenih komponenti koje pokreće funkcija povratnog poziva koja se prenosi kao podrška.
2. Učinkovito rukovanje državnim podacima
Loše upravljanje stanjem može dovesti do nedosljednosti podataka, što dovodi do neočekivanog ponašanja koje može biti teško pronaći i popraviti. Dobro upravljanje stanjem uključuje izbjegavanje pohranjivanja nepotrebnih podataka u stanje, što može usporiti aplikaciju i otežati otklanjanje pogrešaka. Važno je osigurati da su sva stanja koja pohranjujete apsolutno neophodna za renderiranje komponente.
Drugi način za učinkovito ažuriranje stanja je korištenje tehnika nepromjenjivosti, poput operatora širenja ili Object.assign() metoda.
Na primjer:
uvoz Reagiraj, {useState} iz'reagirati';funkcijaMoja komponenta() {
konst [stanje, setState] = useState({
računati: 0,
tekst: 'Zdravo'
});funkcijaručkaClick() {
setState(prevState => {
povratakObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
povratak (
U ovom primjeru, ručkaClick funkcija koristi setState kuka za ažuriranje stanja. Ipak, umjesto izravne izmjene objekta stanja, koristi se Object.assign() metoda za stvaranje novog objekta koji kopira prethodno stanje s izmijenjenim svojstvom brojanja. Ovaj pristup omogućuje Reactovom virtualnom DOM-u da ponovno prikaže komponentu kada prepozna da ste ažurirali stanje.
Također možete koristiti biblioteku za upravljanje stanjem kao što je Redux i ugrađeni kontekstni API za implementaciju ove tehnike.
3. Implementirajte sustav praćenja učinka
Sustavi za praćenje performansi mobilnih aplikacija (PMS) alati su koji vam omogućuju mjerenje i analizu performansi vaših mobilnih aplikacija. Oni pružaju značajke kao što su praćenje u stvarnom vremenu, izvješćivanje o padu, praćenje mreže, metrika performansi i ponavljanje korisničke sesije. Korištenje sustava za praćenje performansi s vašom aplikacijom React Native omogućit će vam da identificirate uska grla u performansama kako biste popravili i skalirali svoju aplikaciju.
Ovdje je popis nekoliko dostupnih PMC alata.
- React Native Debugger: samostalna aplikacija koja vam omogućuje otklanjanje pogrešaka i provjeru stanja vaše React Native aplikacije. Također uključuje monitor performansi koji vam pomaže identificirati i popraviti probleme s performansama.
- React Native Profiler: Ovaj ugrađeni alat za praćenje performansi omogućuje vam da gledate performanse svoje aplikacije mjerenjem vremena potrebnog za renderiranje svake komponente.
- Flipper: platforma za razvoj mobilnih aplikacija s monitorom performansi koji vam može pomoći u prepoznavanju i rješavanju problema s performansama.
- Firebase Performance Monitoring: alat za praćenje performansi koji nudi Firebase i koji vam omogućuje praćenje izvedbe vaše aplikacije na različitim uređajima i platformama.
4. Uklonite Console.log izjave
Kada se izvodi naredba console.log, ona šalje poruku JavaScript stroju da zabilježi poruku u konzolu. JS mehanizam zatim treba vremena da obradi i prikaže poruku.
Previše iskaza konzole u vašem kodu usporit će njegovo izvršenje i uzrokovati kašnjenja u izvedbi. To može biti posebno problematično kada vaša aplikacija radi na uređaju s ograničenim resursima, kao što je jeftiniji mobilni uređaj.
5. Izgradite učinkovit navigacijski sustav
Dobar navigacijski sustav poboljšat će ukupnu strukturu vaše aplikacije React Native, olakšavajući održavanje, ažuriranje značajki i učinkovito prosljeđivanje podataka o stanju. Osim toga, olakšava prebacivanje između više zaslona u vašoj aplikaciji, poboljšavajući korisničko iskustvo.
Trebali biste uzeti u obzir čimbenike poput pravog navigacijskog obrasca (na temelju kartice, na temelju hrpe, na temelju ladice itd.) koji će odgovarati vašoj aplikaciji. Uzmite u obzir broj zaslona koje očekujete u svojoj aplikaciji i način na koji ćete prenositi podatke o stanju između njih.
Predmemoriranje je korisna metoda za razvoj pouzdanog navigacijskog sustava. Predmemoriranje vam omogućuje da spremite stanje zaslona ili komponente kada ih korisnik napusti, a zatim ih vratite kada se vrate. To pomaže smanjiti količinu podataka koje trebate učitati i broj puta koji trebate ponovno prikazati.
React Native ima nekoliko biblioteka dostupnih za navigaciju, kao što su React Navigation i React Native Navigation. Možete ih koristiti za implementaciju nekih od ovih uobičajenih navigacijskih obrazaca u svojoj aplikaciji.
6. Smanjite veličinu aplikacije s dijeljenjem koda i odlijepljenim učitavanjem
Veličina aplikacije važna je za optimizirane performanse jer može utjecati na aspekte korisničkog iskustva, poput početnog vremena učitavanja, upotrebe memorije i prostora za pohranu.
Dijeljenje koda i odgođeno učitavanje tehnike su koje mogu smanjiti veličinu vaše React Native aplikacije i poboljšati performanse.
Dijeljenje koda je proces rastavljanja velike baze JavaScript koda u manje "pakete" kojima se lakše upravlja. To može znatno smanjiti početno vrijeme učitavanja aplikacije.
Lijeno učitavanje je tehnika koja vam omogućuje učitavanje komponenti dok korisnik dolazi do njih, a ne pri pokretanju. To može pomoći u smanjenju količine memorije koju vaša aplikacija koristi i poboljšati ukupnu izvedbu.
Zašto je optimizacija performansi važna
Optimizacija performansi ključna je za uspjeh svake mobilne aplikacije. Spora aplikacija može dovesti do lošeg korisničkog iskustva i u konačnici rezultirati niskim angažmanom i zadržavanjem.
Ovi trikovi samo su neki od načina na koje možete upotrijebiti kako biste osigurali ugodno iskustvo za bazu korisnika vaše aplikacije.
