Utilizarea unei aplicații mobile ar trebui să fie o experiență plăcută, fără întârzieri frustrante. În calitate de dezvoltator React Native, este esențial să vă optimizați aplicațiile, astfel încât acestea să funcționeze bine și să fie ușor de utilizat. Performanța maximă a aplicației necesită să scrieți cod curat și eficient folosind instrumentele și bibliotecile potrivite.
Aruncă o privire la aceste sfaturi și tehnici pentru a optimiza performanța aplicației React Native.
1. Reduceți redările inutile cu ajutorul Memo Hook
React Native redă componente folosind o tehnologie Virtual DOM (VDOM). VDOM ține evidența tuturor modificărilor aduse componentei aplicației și redă din nou întreaga ierarhie de vizualizare atunci când consideră necesar. Acest proces este costisitor, așa că ar trebui să evitați actualizările inutile ale stării și elementelor de recuzită ale componentei.
Biblioteca React oferă foloseșteMemo și utilizați Callback cârlige pentru a rezolva această problemă în componentele funcționale. Puteți folosi cârligul useMemo pentru memorați valoarea rezultată a unei funcții JavaScript pe care nu doriți să le recalculați la fiecare randare.
Iată un exemplu despre cum puteți utiliza foloseșteMemo cârlig:
import { foloseșteMemo } din'reacţiona';funcţieMyComponent({ date }) {
// Funcția computeExpensiveValue este un calcul costisitor care
// nu trebuie să fie recalculat la fiecare randare.
const expensiveValue = useMemo(() => computeExpensiveValue (date), [date]);
// Componenta poate folosi valoarea memorată fără recalculare
// acesta la fiecare randare.
întoarcere{expensiveValue}</div>;
}
Înfășurarea computeExpensiveValue funcția în interiorul foloseșteMemo hook memorează rezultatul funcției. The foloseșteMemo hook poate accepta un al doilea argument ca dependență. Aceasta înseamnă că funcția memorată va rula câștig numai atunci când această dependență se schimbă.
utilizați Callback este asemănător cu foloseșteMemo, dar memorează o funcție de apel invers în loc de o valoare. Acest lucru poate fi util pentru prevenirea redărilor inutile ale componentelor copil declanșate de o funcție de apel invers transmisă ca prop.
2. Tratarea eficientă a datelor de stat
Gestionarea proastă a stării poate duce la inconsecvențe ale datelor, ceea ce duce la un comportament neașteptat care poate fi dificil de urmărit și remediat. O bună gestionare a stării implică evitarea stocării datelor inutile în stare, ceea ce poate încetini aplicația și poate face mai dificilă depanarea. Este important să vă asigurați că toate stările pe care le stocați sunt absolut necesare pentru ca componenta să fie redată.
O altă modalitate de a actualiza starea în mod eficient este utilizarea tehnicilor de imuabilitate, cum ar fi operatorul de răspândire sau Object.assign() metodă.
De exemplu:
import Reacționează, { useState } din'reacţiona';funcţieMyComponent() {
const [state, setState] = useState({
numara: 0,
text: 'Buna ziua'
});funcţiehandleClick() {
setState(prevState => {
întoarcereObiect.assign({}, prevState, { count: prevState.count + 1 });
});
}
întoarcere (
În acest exemplu, handleClick funcția folosește setState cârlig pentru a actualiza starea. Totuși, în loc să modifice direct obiectul de stare, folosește Object.assign() metodă de a crea un nou obiect care copiază starea anterioară cu proprietatea count modificată. Această abordare permite DOM-ului virtual al React să redea componenta atunci când recunoaște că ați actualizat starea.
De asemenea, puteți utiliza o bibliotecă de management de stat, cum ar fi Redux și API-ul context încorporat pentru a implementa această tehnică.
3. Implementarea unui sistem de monitorizare a performanței
Sistemele de monitorizare a performanței aplicațiilor mobile (PMS) sunt instrumente care vă permit să măsurați și să analizați performanța aplicațiilor dvs. mobile. Acestea oferă funcții precum monitorizarea în timp real, raportarea erorilor, monitorizarea rețelei, valorile de performanță și redarea sesiunii de utilizator. Utilizarea unui sistem de monitorizare a performanței cu aplicația React Native vă va permite să identificați blocajele de performanță pentru a remedia și a scala aplicația.
Iată o listă cu mai multe instrumente PMC disponibile.
- React Native Debugger: o aplicație autonomă care vă permite să depanați și să inspectați starea aplicației dvs. React Native. De asemenea, include un monitor de performanță pentru a vă ajuta să identificați și să remediați problemele de performanță.
- React Native Profiler: Acest instrument de monitorizare a performanței încorporat vă permite să urmăriți performanța aplicației dvs. măsurând timpul necesar pentru a randa fiecare componentă.
- Flipper: o platformă de dezvoltare a aplicațiilor mobile cu un monitor de performanță care vă poate ajuta să identificați și să remediați problemele de performanță.
- Firebase Performance Monitoring: un instrument de monitorizare a performanței oferit de Firebase, care vă permite să urmăriți performanța aplicației dvs. pe diferite dispozitive și platforme.
4. Eliminați instrucțiunile Console.log
Când rulează o instrucțiune console.log, aceasta trimite un mesaj motorului JavaScript pentru a înregistra mesajul în consolă. Motorul JS necesită apoi timp pentru a procesa și afișa mesajul.
Prea multe instrucțiuni de consolă în codul dvs. vor încetini execuția acestuia și vor cauza întârzieri de performanță. Acest lucru poate fi mai ales problematic atunci când aplicația dvs. rulează pe un dispozitiv cu resurse limitate, cum ar fi un dispozitiv mobil de ultimă generație.
5. Construiți un sistem de navigație eficient
Un sistem de navigare bun va îmbunătăți structura generală a aplicației dvs. React Native, facilitând întreținerea, actualizarea funcțiilor și transmiterea eficientă a datelor de stare. În plus, face comutarea între mai multe afișaje din aplicația dvs. mult mai ușoară, îmbunătățind experiența utilizatorului.
Ar trebui să luați în considerare factori precum modelul de navigare corect (pe baza de file, pe stivă, pe sertare etc.) pentru a se potrivi aplicației dvs. Luați în considerare numărul de ecrane pe care le așteptați în aplicația dvs. și modul în care veți transmite datele de stare între ele.
Memorarea în cache este o metodă utilă pentru dezvoltarea unui sistem de navigație fiabil. Memorarea în cache vă permite să salvați starea unui ecran sau a unei componente atunci când utilizatorul o părăsește, apoi să o restaurați când revin. Acest lucru ajută la minimizarea cantității de date pe care trebuie să le încărcați și de câte ori trebuie să le redați din nou.
React Native are mai multe biblioteci disponibile pentru navigare, cum ar fi React Navigation și React Native Navigation. Le puteți folosi pentru a implementa unele dintre aceste modele de navigare comune în aplicația dvs.
6. Reduceți dimensiunea aplicației cu împărțirea codului și încărcare leneră
Dimensiunea aplicației este importantă pentru performanța optimizată, deoarece poate afecta aspecte ale experienței utilizatorului, cum ar fi timpul inițial de încărcare, utilizarea memoriei și spațiul de stocare.
Divizarea codului și încărcarea leneră sunt tehnici care pot reduce dimensiunea aplicației React Native și pot îmbunătăți performanța.
Divizarea codului este procesul de împărțire a unei baze mari de cod JavaScript în „pachete” mai mici și mai ușor de gestionat. Acest lucru poate reduce semnificativ timpul inițial de încărcare a aplicației.
Încărcarea leneră este o tehnică care vă permite să încărcați componente pe măsură ce utilizatorul navighează la ele, mai degrabă decât la pornire. Acest lucru poate ajuta la reducerea cantității de memorie pe care o folosește aplicația dvs. și la îmbunătățirea performanței generale.
De ce este importantă optimizarea performanței
Optimizarea performanței este crucială pentru succesul oricărei aplicații mobile. O aplicație lentă poate duce la o experiență slabă a utilizatorului și, în cele din urmă, poate duce la un nivel scăzut de implicare și reținere.
Aceste trucuri sunt doar câteva moduri pe care le puteți utiliza pentru a asigura o experiență plăcută pentru baza de utilizatori a aplicației dvs.