Att använda en mobilapp ska vara en trevlig upplevelse, utan några frustrerande förseningar. Som React Native-utvecklare är det avgörande att du optimerar dina appar, så att de fungerar bra och är enkla att använda. Topp appprestanda kräver att du skriver ren och effektiv kod med rätt verktyg och bibliotek.
Ta en titt på dessa tips och tekniker för att optimera prestandan för din React Native-app.
1. Minska onödiga omrenderingar med användning av Memo Hook
React Native renderar komponenter med hjälp av en Virtual DOM (VDOM)-teknik. VDOM håller reda på alla ändringar av appkomponenten och återskapar hela vyhierarkin när det bedöms nödvändigt. Denna process är dyr, så du bör undvika onödiga uppdateringar av komponentens tillstånd och rekvisita.
React-biblioteket tillhandahåller användMemo och använd Återuppringning krokar för att lösa detta problem i funktionella komponenter. Du kan använda useMemo-kroken för att
memorera det resulterande värdet av en JavaScript-funktion att du inte vill räkna om på varje rendering.Här är ett exempel på hur du kan använda användMemo krok:
importera { useMemo } från'reagera';fungeraMyComponent({ data }) {
// ComputeExpensiveValue-funktionen är en dyr beräkning som
// behöver inte beräknas om vid varje rendering.
konst dyrvärde = useMemo(() => computeExpensiveValue (data), [data]);
// Komponenten kan använda det memoiserade värdet utan att räkna om
// det på varje rendering.
lämna tillbaka{expensiveValue}</div>;
}
Inslagning av computeExpensiveValue funktion inuti användMemo hook memorerar resultatet av funktionen. De användMemo hook kan acceptera ett andra argument som ett beroende. Detta innebär att den memoiserade funktionen endast kommer att köra förstärkning när detta beroende ändras.
använd Återuppringning liknar användMemo, men den memorerar en återuppringningsfunktion istället för ett värde. Detta kan vara användbart för att förhindra onödiga återrenderingar av underordnade komponenter som utlöses av en återuppringningsfunktion som skickats ned som en rekvisita.
2. Effektiv hantering av tillståndsdata
Dålig statlig förvaltning kan leda till datainkonsekvenser, vilket leder till oväntat beteende som kan vara svårt att spåra och åtgärda. Bra tillståndshantering innebär att man undviker att lagra onödig data i tillståndet, vilket kan sakta ner appen och göra det svårare att felsöka. Det är viktigt att se till att alla tillstånd du lagrar är absolut nödvändiga för att komponenten ska återge.
Ett annat sätt att uppdatera tillståndet effektivt är att använda oföränderlighetstekniker, som spridningsoperatören eller Object.assign() metod.
Till exempel:
importera Reagera, { useState } från'reagera';fungeraMyComponent() {
konst [state, setState] = useState({
räkna: 0,
text: 'Hallå'
});fungerahandleClick() {
setState(prevState => {
lämna tillbakaObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
lämna tillbaka (
I det här exemplet är handleClick funktionen använder setState krok för att uppdatera tillståndet. Ändå, istället för att direkt modifiera tillståndsobjektet, använder den Object.assign() metod för att skapa ett nytt objekt som kopierar det tidigare tillståndet med count-egenskapen modifierad. Detta tillvägagångssätt tillåter Reacts virtuella DOM att återrendera komponenten när den känner igen att du har uppdaterat tillståndet.
Du kan också använda ett tillståndshanteringsbibliotek som Redux och det inbyggda kontext-API: et att implementera denna teknik.
3. Implementera ett prestandaövervakningssystem
Mobilapps prestandaövervakningssystem (PMS) är verktyg som låter dig mäta och analysera prestandan för dina mobilappar. De tillhandahåller funktioner som realtidsövervakning, kraschrapportering, nätverksövervakning, prestandastatistik och återuppspelning av användarsessioner. Genom att använda ett prestandaövervakningssystem med din React Native-app kan du identifiera prestandaflaskhalsar för att fixa och skala din app.
Här är en lista över flera tillgängliga PMC-verktyg.
- React Native Debugger: En fristående app som låter dig felsöka och inspektera statusen för din React Native-app. Den innehåller också en prestandaövervakare som hjälper dig att identifiera och åtgärda prestandaproblem.
- React Native Profiler: Detta inbyggda verktyg för prestandaövervakning låter dig se din app prestanda genom att mäta den tid det tar att rendera varje komponent.
- Flipper: En utvecklingsplattform för mobilappar med en prestandamonitor som kan hjälpa dig att identifiera och åtgärda prestandaproblem.
- Firebase Performance Monitoring: Ett prestandaövervakningsverktyg från Firebase som låter dig spåra prestandan för din app på olika enheter och plattformar.
4. Ta bort Console.log-uttalanden
När en console.log-sats körs skickar den ett meddelande till JavaScript-motorn för att logga meddelandet till konsolen. JS-motorn tar sedan tid att bearbeta och visa meddelandet.
För många konsolsatser i din kod kommer att sakta ner dess exekvering och orsaka prestandaförseningar. Detta kan vara särskilt problematiskt när din app körs på en enhet med begränsade resurser, t.ex. en low-end mobil enhet.
5. Bygg ett effektivt navigationssystem
Ett bra navigationssystem kommer att förbättra den övergripande strukturen för din React Native-app, vilket gör det lättare att underhålla, uppdatera funktioner och skicka tillståndsdata runt på ett effektivt sätt. Dessutom gör det att växla mellan flera skärmar i din applikation mycket enklare, vilket förbättrar användarupplevelsen.
Du bör överväga faktorer som rätt navigeringsmönster (flikbaserat, stackbaserat, lådbaserat, etc.) för att passa din app. Ta hänsyn till antalet skärmar du förväntar dig i din app och hur du skickar tillståndsdata mellan dem.
Caching är en användbar metod för att utveckla ett tillförlitligt navigationssystem. Cachning låter dig spara tillståndet för en skärm eller komponent när användaren lämnar den och sedan återställa den när de kommer tillbaka. Detta hjälper till att minimera mängden data som du behöver ladda och antalet gånger du behöver återrendera.
React Native har flera bibliotek tillgängliga för navigering, såsom React Navigation och React Native Navigation. Du kan använda dem för att implementera några av dessa vanliga navigeringsmönster i din app.
6. Minska appstorleken med koddelning och lat laddning
Appstorleken är viktig för optimerad prestanda eftersom den kan påverka aspekter av användarupplevelsen, som initial laddningstid, minnesanvändning och lagringsutrymme.
Koddelning och lat laddning är tekniker som kan minska storleken på din React Native-app och förbättra prestandan.
Koddelning är processen att bryta ner en stor JavaScript-kodbas i mindre, mer hanterbara "paket". Detta kan avsevärt minska den initiala laddningstiden för appen.
Lazy loading är en teknik som låter dig ladda komponenter när användaren navigerar till dem snarare än vid start. Detta kan hjälpa till att minska mängden minne som din app använder och förbättra den övergripande prestandan.
Varför prestationsoptimering är viktigt
Prestandaoptimering är avgörande för framgången för alla mobilappar. En långsam app kan leda till dålig användarupplevelse och i slutändan resultera i lågt engagemang och retention.
Dessa knep är bara några få sätt du kan använda för att säkerställa en njutbar upplevelse för din apps användarbas.
