Het gebruik van een mobiele app zou een plezierige ervaring moeten zijn, zonder frustrerende vertragingen. Als React Native-ontwikkelaar is het van cruciaal belang dat je je apps optimaliseert, zodat ze goed werken en gemakkelijk te gebruiken zijn. Voor topprestaties van apps moet u schone en efficiënte code schrijven met de juiste tools en bibliotheken.
Bekijk deze tips en technieken om de prestaties van uw React Native-app te optimaliseren.
1. Verminder onnodige herweergaven met useMemo Hook
React Native rendert componenten met behulp van een Virtual DOM (VDOM)-technologie. De VDOM houdt alle wijzigingen in de app-component bij en geeft de volledige weergavehiërarchie opnieuw weer wanneer dit nodig wordt geacht. Dit proces is duur, dus u moet onnodige updates van de status en rekwisieten van het onderdeel vermijden.
De React-bibliotheek biedt de gebruikMemo
En gebruikTerugbellen hooks om dit probleem op te lossen in functionele componenten. U kunt de useMemo-hook gebruiken om onthoud de resulterende waarde van een JavaScript-functie die u niet bij elke weergave opnieuw wilt berekenen.Hier is een voorbeeld van hoe u de gebruikMemo haak:
importeren { gebruikMemo } van'Reageer';functieMijnComponent({ gegevens }) {
// De functie computeExpensiveValue is een dure berekening die
// hoeft niet bij elke render opnieuw te worden berekend.
const dureWaarde = useMemo(() => computeExpensiveValue (gegevens), [gegevens]);
// De component kan de gememoriseerde waarde gebruiken zonder opnieuw te berekenen
// het op elke render.
opbrengst{expensiveValue}</div>;
}
Het inpakken van de computeExpensiveValue functie binnen de gebruikMemo hook onthoudt het resultaat van de functie. De gebruikMemo hook kan een tweede argument accepteren als afhankelijkheid. Dit betekent dat de gememoriseerde functie alleen versterking uitvoert wanneer deze afhankelijkheid verandert.
gebruikTerugbellen is gelijkaardig aan gebruikMemo, maar het onthoudt een callback-functie in plaats van een waarde. Dit kan handig zijn om onnodige herweergave van onderliggende componenten te voorkomen die worden geactiveerd door een callback-functie die als prop is doorgegeven.
2. Effectieve verwerking van staatsgegevens
Slecht statusbeheer kan leiden tot gegevensinconsistenties, wat leidt tot onverwacht gedrag dat moeilijk op te sporen en op te lossen is. Goed statusbeheer omvat het vermijden van het opslaan van onnodige gegevens in de staat, wat de app kan vertragen en het moeilijker kan maken om fouten op te sporen. Het is belangrijk om ervoor te zorgen dat alle status die u opslaat absoluut noodzakelijk is om de component te laten renderen.
Een andere manier om de status effectief bij te werken, is door onveranderlijkheidstechnieken te gebruiken, zoals de spread-operator of de Object.toewijzen() methode.
Bijvoorbeeld:
importeren Reageer, { useState } van'Reageer';functieMijnComponent() {
const [status, setState] = useState({
graaf: 0,
tekst: 'Hallo'
});functiehandvatKlik() {
setState(vorigeStaat => {
opbrengstVoorwerp.assign({}, prevState, { count: prevState.count + 1 });
});
}
opbrengst (
In dit voorbeeld is de handvatKlik functie gebruikt de setState hook om de status bij te werken. Maar in plaats van het state-object rechtstreeks te wijzigen, gebruikt het de Object.toewijzen() methode om een nieuw object te maken dat de vorige status kopieert met de eigenschap count gewijzigd. Met deze aanpak kan de virtuele DOM van React de component opnieuw renderen wanneer deze herkent dat u de status hebt bijgewerkt.
U kunt ook een statusbeheerbibliotheek zoals Redux en de ingebouwde context-API om deze techniek toe te passen.
3. Implementeer een prestatiebewakingssysteem
Prestatiebewakingssystemen voor mobiele apps (PMS) zijn hulpmiddelen waarmee u de prestaties van uw mobiele apps kunt meten en analyseren. Ze bieden functies zoals real-time monitoring, crashrapportage, netwerkmonitoring, prestatiestatistieken en het opnieuw afspelen van gebruikerssessies. Door een prestatiebewakingssysteem te gebruiken met uw React Native-app, kunt u prestatieknelpunten identificeren om uw app op te lossen en te schalen.
Hier is een lijst met verschillende beschikbare PMC-tools.
- React Native Debugger: een zelfstandige app waarmee u fouten kunt opsporen en de status van uw React Native-app kunt inspecteren. Het bevat ook een prestatiemonitor om u te helpen prestatieproblemen te identificeren en op te lossen.
- React Native Profiler: met deze ingebouwde tool voor prestatiebewaking kunt u de prestaties van uw app bekijken door de tijd te meten die nodig is om elk onderdeel weer te geven.
- Flipper: een ontwikkelingsplatform voor mobiele apps met een prestatiemonitor die u kan helpen prestatieproblemen te identificeren en op te lossen.
- Firebase Performance Monitoring: een prestatiebewakingstool van Firebase waarmee u de prestaties van uw app op verschillende apparaten en platforms kunt volgen.
4. Verwijder Console.log-verklaringen
Wanneer een instructie console.log wordt uitgevoerd, stuurt deze een bericht naar de JavaScript-engine om het bericht naar de console te loggen. De JS-engine heeft dan tijd nodig om het bericht te verwerken en weer te geven.
Te veel console-instructies in uw code vertragen de uitvoering en veroorzaken prestatievertragingen. Dit kan met name problematisch zijn wanneer uw app wordt uitgevoerd op een apparaat met beperkte bronnen, zoals een low-end mobiel apparaat.
5. Bouw een efficiënt navigatiesysteem
Een goed navigatiesysteem zal de algehele structuur van uw React Native-app verbeteren, waardoor het eenvoudiger wordt om functies te onderhouden, bij te werken en statusgegevens efficiënt door te geven. Bovendien wordt het schakelen tussen meerdere beeldschermen in uw toepassing veel eenvoudiger, wat de gebruikerservaring verbetert.
U moet rekening houden met factoren zoals het juiste navigatiepatroon (tabbladgebaseerd, stapelgebaseerd, ladegebaseerd, enz.) om bij uw app te passen. Houd rekening met het aantal schermen dat u in uw app verwacht en hoe u statusgegevens tussen deze schermen doorgeeft.
Caching is een handige methode om een betrouwbaar navigatiesysteem te ontwikkelen. Met caching kunt u de status van een scherm of component opslaan wanneer de gebruiker het verlaat, en het vervolgens herstellen wanneer deze terugkeert. Dit helpt de hoeveelheid gegevens die u moet laden en het aantal keren dat u opnieuw moet renderen, tot een minimum te beperken.
React Native heeft verschillende bibliotheken beschikbaar voor navigatie, zoals React Navigation en React Native Navigation. U kunt ze gebruiken om enkele van deze algemene navigatiepatronen in uw app te implementeren.
6. Verklein de app-grootte met codesplitsing en lui laden
App-grootte is belangrijk voor optimale prestaties omdat het aspecten van de gebruikerservaring kan beïnvloeden, zoals initiële laadtijd, geheugengebruik en opslagruimte.
Het splitsen van codes en lui laden zijn technieken die de grootte van uw React Native-app kunnen verkleinen en de prestaties kunnen verbeteren.
Codesplitsing is het proces waarbij een grote JavaScript-codebasis wordt opgesplitst in kleinere, beter beheersbare 'bundels'. Dit kan de initiële laadtijd van de app aanzienlijk verkorten.
Lazy loading is een techniek waarmee u componenten kunt laden terwijl de gebruiker ernaartoe navigeert in plaats van bij het opstarten. Dit kan helpen de hoeveelheid geheugen die uw app gebruikt te verminderen en de algehele prestaties te verbeteren.
Waarom prestatieoptimalisatie belangrijk is
Prestatieoptimalisatie is cruciaal voor het succes van elke mobiele app. Een trage app kan leiden tot een slechte gebruikerservaring en uiteindelijk resulteren in lage betrokkenheid en retentie.
Deze trucs zijn slechts enkele manieren waarop u kunt zorgen voor een plezierige ervaring voor de gebruikers van uw app.
