Brug af en mobilapp skal være en fornøjelig oplevelse uden frustrerende forsinkelser. Som React Native-udvikler er det afgørende, at du optimerer dine apps, så de fungerer godt og er nemme at bruge. Peak app-ydeevne kræver, at du skriver ren og effektiv kode ved hjælp af de rigtige værktøjer og biblioteker.
Tag et kig på disse tips og teknikker til at optimere ydeevnen af din React Native-app.
1. Reducer unødvendige gengivelser med brug af Memo-krog
React Native gengiver komponenter ved hjælp af en Virtual DOM (VDOM) teknologi. VDOM holder styr på alle ændringer af app-komponenten og gengiver hele visningshierarkiet, når det skønnes nødvendigt. Denne proces er dyr, så du bør undgå unødvendige opdateringer af komponentens tilstand og rekvisitter.
React-biblioteket leverer brug Memo og brug Tilbagekald kroge for at løse dette problem i funktionelle komponenter. Du kan bruge useMemo-krogen til
huske den resulterende værdi af en JavaScript-funktion at du ikke ønsker at genberegne på hver gengivelse.Her er et eksempel på, hvordan du kan bruge brug Memo krog:
importere { useMemo } fra'reagere';fungereMyComponent({ data }) {
// ComputeExpensiveValue-funktionen er en dyr beregning, der
// behøver ikke at blive genberegnet ved hver gengivelse.
konst dyrVærdi = useMemo(() => computeExpensiveValue (data), [data]);
// Komponenten kan bruge den huskede værdi uden at genberegne
// det på hver gengivelse.
Vend tilbage{expensiveValue}</div>;
}
Indpakning af computeExpensiveValue funktion inde i brug Memo hook husker resultatet af funktionen. Det brug Memo hook kan acceptere et andet argument som en afhængighed. Dette betyder, at den huskede funktion kun vil køre forstærkning, når denne afhængighed ændres.
brug Tilbagekald ligner brug Memo, men den husker en tilbagekaldsfunktion i stedet for en værdi. Dette kan være nyttigt til at forhindre unødvendige gengivelser af underordnede komponenter udløst af en tilbagekaldsfunktion, der er videregivet som en prop.
2. Effektiv håndtering af tilstandsdata
Dårlig statsforvaltning kan føre til datainkonsekvenser, hvilket fører til uventet adfærd, som kan være svær at spore og rette. God tilstandsstyring indebærer, at man undgår at gemme unødvendige data i tilstanden, hvilket kan bremse appen og gøre det sværere at fejlfinde. Det er vigtigt at sikre, at al tilstand, du gemmer, er absolut nødvendig for, at komponenten kan gengives.
En anden måde at opdatere tilstand effektivt på er at bruge uforanderlighedsteknikker, såsom spredningsoperatøren eller Object.assign() metode.
For eksempel:
importere Reager, { useState } fra'reagere';fungereMyComponent() {
konst [state, setState] = useState({
tælle: 0,
tekst: 'Hej'
});fungerehandleKlik() {
setState(prevState => {
Vend tilbageObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
Vend tilbage (
I dette eksempel er handleKlik funktionen bruger sætState krog for at opdatere staten. Stadig, i stedet for direkte at ændre tilstandsobjektet, bruger den Object.assign() metode til at oprette et nyt objekt, der kopierer den tidligere tilstand med egenskaben count ændret. Denne tilgang tillader Reacts virtuelle DOM at gengive komponenten, når den genkender, at du har opdateret tilstanden.
Du kan også bruge et statsadministrationsbibliotek som Redux og den indbyggede kontekst API at implementere denne teknik.
3. Implementer et præstationsovervågningssystem
Mobile app performance monitoring systems (PMS) er værktøjer, der lader dig måle og analysere ydeevnen af dine mobilapps. De giver funktioner såsom overvågning i realtid, nedbrudsrapportering, netværksovervågning, præstationsmålinger og genafspilning af brugersessioner. Brug af et ydeevneovervågningssystem med din React Native-app vil give dig mulighed for at identificere ydeevneflaskehalse for at rette og skalere din app.
Her er en liste over flere tilgængelige PMC-værktøjer.
- React Native Debugger: En selvstændig app, der lader dig fejlfinde og inspicere tilstanden af din React Native-app. Det inkluderer også en præstationsmonitor, der hjælper dig med at identificere og løse ydeevneproblemer.
- React Native Profiler: Dette indbyggede ydelsesovervågningsværktøj giver dig mulighed for at se din apps ydeevne ved at måle den tid, det tager at gengive hver komponent.
- Flipper: En mobilappudviklingsplatform med en ydeevnemonitor, der kan hjælpe dig med at identificere og løse ydeevneproblemer.
- Firebase Performance Monitoring: Et præstationsovervågningsværktøj leveret af Firebase, der giver dig mulighed for at spore din apps ydeevne på forskellige enheder og platforme.
4. Fjern Console.log-erklæringer
Når en console.log-sætning kører, sender den en besked til JavaScript-motoren for at logge beskeden til konsollen. JS-motoren tager derefter tid at behandle og vise meddelelsen.
For mange konsoludsagn i din kode vil sinke dens eksekvering og forårsage forsinkelser i ydeevnen. Dette kan især være problematisk, når din app kører på en enhed med begrænsede ressourcer, såsom en low-end mobilenhed.
5. Byg et effektivt navigationssystem
Et godt navigationssystem vil forbedre den overordnede struktur af din React Native-app, hvilket gør det nemmere at vedligeholde, opdatere funktioner og sende tilstandsdata rundt på en effektiv måde. Derudover gør det skift mellem flere skærme i din applikation meget nemmere, hvilket forbedrer brugeroplevelsen.
Du bør overveje faktorer som det rigtige navigationsmønster (fanebaseret, stakbaseret, skuffebaseret osv.), der passer til din app. Tag højde for antallet af skærme, du forventer i din app, og hvordan du vil videregive tilstandsdata mellem dem.
Caching er en nyttig metode til at udvikle et pålideligt navigationssystem. Caching giver dig mulighed for at gemme tilstanden for en skærm eller komponent, når brugeren forlader den, og derefter gendanne den, når de vender tilbage. Dette hjælper med at minimere mængden af data, du skal indlæse, og antallet af gange, du skal gengive.
React Native har flere tilgængelige biblioteker til navigation, såsom React Navigation og React Native Navigation. Du kan bruge dem til at implementere nogle af disse almindelige navigationsmønstre i din app.
6. Reducer appstørrelsen med kodeopdeling og doven indlæsning
Appstørrelsen er vigtig for optimeret ydeevne, fordi den kan påvirke aspekter af brugeroplevelsen, såsom indledende indlæsningstid, hukommelsesforbrug og lagerplads.
Kodeopdeling og doven indlæsning er teknikker, der kan reducere din React Native-apps størrelse og forbedre ydeevnen.
Kodeopdeling er processen med at nedbryde en stor JavaScript-kodebase i mindre, mere håndterbare "bundter". Dette kan reducere den indledende indlæsningstid for appen markant.
Lazy loading er en teknik, der giver dig mulighed for at indlæse komponenter, når brugeren navigerer til dem i stedet for ved opstart. Dette kan hjælpe med at reducere mængden af hukommelse, din app bruger og forbedre den overordnede ydeevne.
Hvorfor ydeevneoptimering er vigtig
Ydeevneoptimering er afgørende for succesen af enhver mobilapp. En langsom app kan føre til dårlig brugeroplevelse og i sidste ende resultere i lavt engagement og fastholdelse.
Disse tricks er kun nogle få måder, du kan bruge til at sikre en fornøjelig oplevelse for din apps brugerbase.