L'utilizzo di un'app mobile dovrebbe essere un'esperienza piacevole, senza ritardi frustranti. In qualità di sviluppatore React Native, è fondamentale ottimizzare le tue app, in modo che funzionino bene e siano facili da usare. Le massime prestazioni delle app richiedono di scrivere codice pulito ed efficiente utilizzando gli strumenti e le librerie giusti.
Dai un'occhiata a questi suggerimenti e tecniche per ottimizzare le prestazioni della tua app React Native.
1. Riduci i re-rendering non necessari con useMemo Hook
React Native esegue il rendering dei componenti utilizzando una tecnologia Virtual DOM (VDOM). Il VDOM tiene traccia di tutte le modifiche apportate al componente dell'app e riproduce nuovamente l'intera gerarchia di visualizzazione quando lo ritiene necessario. Questo processo è costoso, quindi dovresti evitare aggiornamenti non necessari allo stato e agli oggetti di scena del componente.
La libreria React fornisce il usaMemo E usaRichiamata ganci per risolvere questo problema nei componenti funzionali. Puoi usare l'hook useMemo per memorizzare il valore risultante di una funzione JavaScript che non vuoi ricalcolare su ogni rendering.
Ecco un esempio di come puoi usare il usaMemo gancio:
importare {usaMemo} da'reagire';funzioneIl mio componente({ dati }) {
// La funzione computeExpensiveValue è un calcolo costoso che
// non ha bisogno di essere ricalcolato ad ogni rendering.
cost costosoValore = useMemo(() => computeExpensiveValue (dati), [dati]);
// Il componente può utilizzare il valore memorizzato senza ricalcolare
// su ogni rendering.
ritorno{costosoValue}</div>;
}
Avvolgere il computeExpensiveValue funzione all'interno del usaMemo hook memorizza il risultato della funzione. IL usaMemo hook può accettare un secondo argomento come dipendenza. Ciò significa che la funzione memorizzata eseguirà il guadagno solo quando questa dipendenza cambia.
usaRichiamata è simile a usaMemo, ma memorizza una funzione di callback invece di un valore. Ciò può essere utile per impedire il re-rendering non necessario dei componenti figlio attivati da una funzione di callback passata come prop.
2. Gestione dei dati sullo stato effettivo
Una cattiva gestione dello stato può portare a incoerenze nei dati, portando a comportamenti imprevisti che possono essere difficili da rintracciare e correggere. Una buona gestione dello stato implica evitare l'archiviazione di dati non necessari nello stato, che può rallentare l'app e rendere più difficile il debug. È importante assicurarsi che tutti gli stati archiviati siano assolutamente necessari per il rendering del componente.
Un altro modo per aggiornare lo stato in modo efficace è utilizzare tecniche di immutabilità, come l'operatore spread o il Oggetto.assegna() metodo.
Per esempio:
importare Reagisci, { useState } da'reagire';funzioneIl mio componente() {
cost [state, setState] = useState({
contare: 0,
testo: 'Ciao'
});funzionemanigliaClic() {
setStato(prevState => {
ritornoOggetto.assign({}, prevState, { conteggio: prevState.count + 1 });
});
}
ritorno (
In questo esempio, il manigliaClic la funzione usa il setState hook per aggiornare lo stato. Tuttavia, invece di modificare direttamente l'oggetto stato, utilizza il file Oggetto.assegna() metodo per creare un nuovo oggetto che copia lo stato precedente con la proprietà count modificata. Questo approccio consente al DOM virtuale di React di eseguire nuovamente il rendering del componente quando riconosce che hai aggiornato lo stato.
Puoi anche utilizzare una libreria di gestione dello stato come Redux e l'API di contesto incorporata per implementare questa tecnica.
3. Implementare un sistema di monitoraggio delle prestazioni
I sistemi di monitoraggio delle prestazioni delle app mobili (PMS) sono strumenti che ti consentono di misurare e analizzare le prestazioni delle tue app mobili. Forniscono funzionalità come monitoraggio in tempo reale, segnalazione di arresti anomali, monitoraggio della rete, metriche delle prestazioni e riproduzione della sessione utente. L'utilizzo di un sistema di monitoraggio delle prestazioni con la tua app React Native ti consentirà di identificare i colli di bottiglia delle prestazioni per correggere e ridimensionare la tua app.
Ecco un elenco di diversi strumenti PMC disponibili.
- React Native Debugger: un'app autonoma che ti consente di eseguire il debug e ispezionare lo stato della tua app React Native. Include anche un monitoraggio delle prestazioni per aiutarti a identificare e risolvere i problemi di prestazioni.
- React Native Profiler: questo strumento di monitoraggio delle prestazioni integrato ti consente di osservare le prestazioni della tua app misurando il tempo necessario per eseguire il rendering di ciascun componente.
- Flipper: una piattaforma di sviluppo di app per dispositivi mobili con un monitor delle prestazioni che può aiutarti a identificare e risolvere i problemi di prestazioni.
- Monitoraggio delle prestazioni di Firebase: uno strumento di monitoraggio delle prestazioni fornito da Firebase che ti consente di monitorare le prestazioni della tua app su diversi dispositivi e piattaforme.
4. Rimuovere le istruzioni Console.log
Quando viene eseguita un'istruzione console.log, invia un messaggio al motore JavaScript per registrare il messaggio nella console. Il motore JS impiega quindi del tempo per elaborare e visualizzare il messaggio.
Troppe istruzioni della console nel codice ne rallenteranno l'esecuzione e causeranno ritardi nelle prestazioni. Questo può essere particolarmente problematico quando la tua app viene eseguita su un dispositivo con risorse limitate, ad esempio un dispositivo mobile di fascia bassa.
5. Costruisci un sistema di navigazione efficiente
Un buon sistema di navigazione migliorerà la struttura complessiva della tua app React Native, semplificando la manutenzione, l'aggiornamento delle funzionalità e il trasferimento efficiente dei dati sullo stato. Inoltre, semplifica notevolmente il passaggio da un display all'altro nell'applicazione, migliorando l'esperienza dell'utente.
Dovresti considerare fattori come il modello di navigazione corretto (basato su schede, basato su stack, basato su cassetto e così via) adatto alla tua app. Prendi in considerazione il numero di schermate che ti aspetti nella tua app e come passerai i dati sullo stato tra di loro.
La memorizzazione nella cache è un metodo utile per sviluppare un sistema di navigazione affidabile. La memorizzazione nella cache consente di salvare lo stato di uno schermo o di un componente quando l'utente lo lascia, quindi ripristinarlo quando ritorna. Ciò consente di ridurre al minimo la quantità di dati da caricare e il numero di volte in cui è necessario eseguire nuovamente il rendering.
React Native ha diverse librerie disponibili per la navigazione, come React Navigation e React Native Navigation. Puoi utilizzarli per implementare alcuni di questi schemi di navigazione comuni nella tua app.
6. Riduci le dimensioni dell'app con la suddivisione del codice e il caricamento lento
Le dimensioni dell'app sono importanti per le prestazioni ottimizzate perché possono influire su aspetti dell'esperienza utente, come il tempo di caricamento iniziale, l'utilizzo della memoria e lo spazio di archiviazione.
La suddivisione del codice e il caricamento lento sono tecniche che possono ridurre le dimensioni della tua app React Native e migliorare le prestazioni.
La suddivisione del codice è il processo di scomposizione di un'ampia base di codice JavaScript in "pacchetti" più piccoli e più gestibili. Ciò può ridurre significativamente il tempo di caricamento iniziale dell'app.
Il lazy loading è una tecnica che consente di caricare i componenti mentre l'utente li raggiunge anziché all'avvio. Ciò può contribuire a ridurre la quantità di memoria utilizzata dall'app e a migliorare le prestazioni complessive.
Perché l'ottimizzazione delle prestazioni è importante
L'ottimizzazione delle prestazioni è fondamentale per il successo di qualsiasi app mobile. Un'app lenta può portare a un'esperienza utente scadente e alla fine comportare un coinvolgimento e una fidelizzazione bassi.
Questi trucchi sono solo alcuni dei modi in cui puoi utilizzare per garantire un'esperienza piacevole per la base di utenti della tua app.