Å bruke en mobilapp skal være en hyggelig opplevelse, uten frustrerende forsinkelser. Som React Native-utvikler er det avgjørende at du optimaliserer appene dine, slik at de fungerer bra og er enkle å bruke. Topp appytelse krever at du skriver ren og effektiv kode ved å bruke de riktige verktøyene og bibliotekene.
Ta en titt på disse tipsene og teknikkene for å optimalisere ytelsen til React Native-appen din.
1. Reduser unødvendige gjengivelser med bruk Memo Hook
React Native gjengir komponenter ved hjelp av en Virtual DOM (VDOM)-teknologi. VDOM holder styr på alle endringer i appkomponenten og gjengir hele visningshierarkiet på nytt når det anses nødvendig. Denne prosessen er dyr, så du bør unngå unødvendige oppdateringer av komponentens tilstand og rekvisitter.
React-biblioteket gir bruk Memo og bruk tilbakeringing kroker for å løse dette problemet i funksjonelle komponenter. Du kan bruke useMemo-kroken til
huske den resulterende verdien av en JavaScript-funksjon at du ikke ønsker å beregne på nytt på hver gjengivelse.Her er et eksempel på hvordan du kan bruke bruk Memo krok:
import { useMemo } fra'reagere';funksjonMin komponent({ data }) {
// ComputeExpensiveValue-funksjonen er en kostbar beregning som
// trenger ikke å bli beregnet på nytt ved hver gjengivelse.
konst dyrt Verdi = brukMemo(() => computeExpensiveValue (data), [data]);
// Komponenten kan bruke den lagrede verdien uten å beregne på nytt
// det på hver gjengivelse.
komme tilbake{expensiveValue}</div>;
}
Innpakning av computeExpensiveValue funksjon inne i bruk Memo Hook lagrer resultatet av funksjonen. De bruk Memo hook kan godta et andre argument som en avhengighet. Dette betyr at den lagrede funksjonen bare vil kjøre gain når denne avhengigheten endres.
bruk tilbakeringing den er lik bruk Memo, men den lagrer en tilbakeringingsfunksjon i stedet for en verdi. Dette kan være nyttig for å forhindre unødvendig gjengivelse av underordnede komponenter utløst av en tilbakeringingsfunksjon som sendes ned som en rekvisitt.
2. Effektiv håndtering av tilstandsdata
Dårlig statsforvaltning kan føre til datainkonsekvenser, noe som fører til uventet oppførsel som kan være vanskelig å spore opp og fikse. God tilstandsstyring innebærer å unngå å lagre unødvendige data i staten, noe som kan bremse appen og gjøre det vanskeligere å feilsøke. Det er viktig å sikre at all tilstand du lagrer er absolutt nødvendig for at komponenten skal gjengis.
En annen måte å oppdatere tilstanden effektivt på er å bruke uforanderlighetsteknikker, som spredningsoperatøren eller Object.assign() metode.
For eksempel:
import Reager, { useState } fra'reagere';funksjonMin komponent() {
konst [state, setState] = useState({
telle: 0,
tekst: 'Hallo'
});funksjonhandleKlikk() {
setState(prevState => {
komme tilbakeGjenstand.assign({}, prevState, { count: prevState.count + 1 });
});
}
komme tilbake (
I dette eksemplet er handleKlikk funksjonen bruker setState krok for å oppdatere staten. Likevel, i stedet for å direkte modifisere tilstandsobjektet, bruker den Object.assign() metode for å lage et nytt objekt som kopierer den forrige tilstanden med count-egenskapen endret. Denne tilnærmingen lar Reacts virtuelle DOM gjengi komponenten på nytt når den gjenkjenner at du har oppdatert tilstanden.
Du kan også bruke et statlig administrasjonsbibliotek som Redux og den innebygde kontekst API å implementere denne teknikken.
3. Implementer et ytelsesovervåkingssystem
Ytelsesovervåkingssystemer for mobilapper (PMS) er verktøy som lar deg måle og analysere ytelsen til mobilappene dine. De tilbyr funksjoner som sanntidsovervåking, krasjrapportering, nettverksovervåking, ytelsesmålinger og gjenspilling av brukerøkter. Ved å bruke et ytelsesovervåkingssystem med React Native-appen din kan du identifisere ytelsesflaskehalser for å fikse og skalere appen din.
Her er en liste over flere tilgjengelige PMC-verktøy.
- React Native Debugger: En frittstående app som lar deg feilsøke og inspisere tilstanden til React Native-appen din. Den inkluderer også en ytelsesmonitor for å hjelpe deg med å identifisere og fikse ytelsesproblemer.
- React Native Profiler: Dette innebygde ytelsesovervåkingsverktøyet lar deg se appens ytelse ved å måle tiden det tar å gjengi hver komponent.
- Flipper: En utviklingsplattform for mobilapper med en ytelsesmonitor som kan hjelpe deg med å identifisere og fikse ytelsesproblemer.
- Firebase Performance Monitoring: Et ytelsesovervåkingsverktøy levert av Firebase som lar deg spore ytelsen til appen din på forskjellige enheter og plattformer.
4. Fjern Console.log-uttalelser
Når en console.log-setning kjører, sender den en melding til JavaScript-motoren for å logge meldingen til konsollen. JS-motoren bruker deretter tid på å behandle og vise meldingen.
For mange konsollsetninger i koden din vil senke kjøringen og forårsake ytelsesforsinkelser. Dette kan være spesielt problematisk når appen din kjører på en enhet med begrensede ressurser, for eksempel en low-end mobilenhet.
5. Bygg et effektivt navigasjonssystem
Et godt navigasjonssystem vil forbedre den generelle strukturen til React Native-appen din, noe som gjør det enklere å vedlikeholde, oppdatere funksjoner og overføre tilstandsdata effektivt. I tillegg gjør det bytte mellom flere skjermer i applikasjonen din mye enklere, og forbedrer brukeropplevelsen.
Du bør vurdere faktorer som riktig navigasjonsmønster (fanebasert, stabelbasert, skuffbasert osv.) for å passe til appen din. Ta hensyn til antall skjermer du forventer i appen din, og hvordan du sender tilstandsdata mellom dem.
Caching er en nyttig metode for å utvikle et pålitelig navigasjonssystem. Caching lar deg lagre tilstanden til en skjerm eller komponent når brukeren forlater den, og deretter gjenopprette den når de kommer tilbake. Dette bidrar til å minimere mengden data du trenger å laste og antall ganger du trenger å gjengi.
React Native har flere biblioteker tilgjengelig for navigering, for eksempel React Navigation og React Native Navigation. Du kan bruke dem til å implementere noen av disse vanlige navigasjonsmønstrene i appen din.
6. Reduser appstørrelsen med kodedeling og lat innlasting
Appstørrelsen er viktig for optimalisert ytelse fordi den kan påvirke aspekter av brukeropplevelsen, som innledende lastetid, minnebruk og lagringsplass.
Kodedeling og lat lasting er teknikker som kan redusere størrelsen på React Native-appen din og forbedre ytelsen.
Kodedeling er prosessen med å bryte ned en stor JavaScript-kodebase i mindre, mer håndterbare «bunter». Dette kan redusere den første lastetiden til appen betydelig.
Lazy loading er en teknikk som lar deg laste inn komponenter når brukeren navigerer til dem i stedet for ved oppstart. Dette kan bidra til å redusere mengden minne appen din bruker og forbedre den generelle ytelsen.
Hvorfor ytelsesoptimalisering er viktig
Ytelsesoptimalisering er avgjørende for suksessen til enhver mobilapp. En treg app kan føre til dårlig brukeropplevelse og til slutt resultere i lavt engasjement og oppbevaring.
Disse triksene er bare noen få måter du kan bruke for å sikre en hyggelig opplevelse for appens brukerbase.
