Η χρήση μιας εφαρμογής για κινητά θα πρέπει να είναι μια ευχάριστη εμπειρία, χωρίς ενοχλητικές καθυστερήσεις. Ως προγραμματιστής React Native, είναι σημαντικό να βελτιστοποιείτε τις εφαρμογές σας, ώστε να λειτουργούν καλά και να είναι εύχρηστες. Η κορυφαία απόδοση της εφαρμογής απαιτεί να γράψετε καθαρό και αποτελεσματικό κώδικα χρησιμοποιώντας τα σωστά εργαλεία και βιβλιοθήκες.
Ρίξτε μια ματιά σε αυτές τις συμβουλές και τεχνικές για να βελτιστοποιήσετε την απόδοση της εφαρμογής React Native.
1. Μειώστε τις περιττές αναπαραγωγές με το useMemo Hook
Το React Native αποδίδει στοιχεία χρησιμοποιώντας τεχνολογία Virtual DOM (VDOM). Το VDOM παρακολουθεί όλες τις αλλαγές στο στοιχείο της εφαρμογής και αποδίδει εκ νέου ολόκληρη την ιεραρχία της προβολής όταν το κρίνει απαραίτητο. Αυτή η διαδικασία είναι δαπανηρή, επομένως θα πρέπει να αποφύγετε περιττές ενημερώσεις για την κατάσταση και τα στηρίγματα του στοιχείου.
Η βιβλιοθήκη React παρέχει το useMemo και χρήση επιστροφής κλήσης άγκιστρα για την επίλυση αυτού του προβλήματος σε λειτουργικά εξαρτήματα. Μπορείτε να χρησιμοποιήσετε το άγκιστρο useMemo για να απομνημονεύστε την προκύπτουσα τιμή μιας συνάρτησης JavaScript που δεν θέλετε να υπολογίσετε ξανά σε κάθε απόδοση.
Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το useMemo άγκιστρο:
εισαγωγή { useMemo } από'αντιδρώ';λειτουργίαMyComponent({ δεδομένα }) {
// Η συνάρτηση computeExpensiveValue είναι ένας ακριβός υπολογισμός που
// δεν χρειάζεται να υπολογιστεί εκ νέου σε κάθε απόδοση.
συνθ costValue = useMemo(() => computeExpensiveValue (δεδομένα), [δεδομένα]);
// Το στοιχείο μπορεί να χρησιμοποιήσει την αποθηκευμένη τιμή χωρίς επανυπολογισμό
// το σε κάθε απόδοση.
ΕΠΙΣΤΡΟΦΗ{expensiveValue}</div>;
}
Τυλίγοντας το computeExpensiveValue λειτουργία μέσα στο useMemo Το άγκιστρο απομνημονεύει το αποτέλεσμα της λειτουργίας. ο useMemo Το hook μπορεί να δεχθεί ένα δεύτερο όρισμα ως εξάρτηση. Αυτό σημαίνει ότι η απομνημονευμένη συνάρτηση θα εκτελείται μόνο όταν αλλάξει αυτή η εξάρτηση.
χρήση επιστροφής κλήσης είναι παρόμοια με useMemo, αλλά απομνημονεύει μια συνάρτηση επανάκλησης αντί για μια τιμή. Αυτό μπορεί να είναι χρήσιμο για την αποφυγή περιττών αναπαραγωγών θυγατρικών εξαρτημάτων που ενεργοποιούνται από μια συνάρτηση επανάκλησης που μεταβιβάζεται ως βάση.
2. Αποτελεσματικός χειρισμός δεδομένων κατάστασης
Η κακή διαχείριση κατάστασης μπορεί να οδηγήσει σε ασυνέπειες δεδομένων, οδηγώντας σε απροσδόκητη συμπεριφορά που μπορεί να είναι δύσκολο να εντοπιστεί και να διορθωθεί. Η καλή διαχείριση κατάστασης περιλαμβάνει την αποφυγή αποθήκευσης περιττών δεδομένων στην κατάσταση, γεγονός που μπορεί να επιβραδύνει την εφαρμογή και να δυσκολέψει τον εντοπισμό σφαλμάτων. Είναι σημαντικό να διασφαλίσετε ότι όλη η κατάσταση που αποθηκεύετε είναι απολύτως απαραίτητη για την απόδοση του στοιχείου.
Ένας άλλος τρόπος για την αποτελεσματική ενημέρωση της κατάστασης είναι η χρήση τεχνικών αμετάβλητης, όπως ο τελεστής διασποράς ή το Object.assign() μέθοδος.
Για παράδειγμα:
εισαγωγή React, { useState } από'αντιδρώ';λειτουργίαMyComponent() {
συνθ [state, setState] = useState({
μετρώ: 0,
κείμενο: 'Γειά σου'
});λειτουργίαhandleClick() {
setState(prevState => {
ΕΠΙΣΤΡΟΦΗΑντικείμενο.assign({}, prevState, { count: prevState.count + 1 });
});
}
ΕΠΙΣΤΡΟΦΗ (
Σε αυτό το παράδειγμα, το handleClick η συνάρτηση χρησιμοποιεί το setState γάντζο για ενημέρωση της κατάστασης. Ωστόσο, αντί να τροποποιήσει απευθείας το αντικείμενο κατάστασης, χρησιμοποιεί το Object.assign() μέθοδο για τη δημιουργία ενός νέου αντικειμένου που αντιγράφει την προηγούμενη κατάσταση με τροποποιημένη την ιδιότητα count. Αυτή η προσέγγιση επιτρέπει στο εικονικό DOM του React να αποδώσει ξανά το στοιχείο όταν αναγνωρίσει ότι έχετε ενημερώσει την κατάσταση.
Μπορείτε επίσης να χρησιμοποιήσετε μια βιβλιοθήκη κρατικής διαχείρισης όπως το Redux και το ενσωματωμένο API περιβάλλοντος για την εφαρμογή αυτής της τεχνικής.
3. Εφαρμογή Συστήματος Παρακολούθησης Απόδοσης
Τα συστήματα παρακολούθησης απόδοσης εφαρμογών για κινητά (PMS) είναι εργαλεία που σας επιτρέπουν να μετράτε και να αναλύετε την απόδοση των εφαρμογών σας για κινητά. Παρέχουν λειτουργίες όπως παρακολούθηση σε πραγματικό χρόνο, αναφορά σφαλμάτων, παρακολούθηση δικτύου, μετρήσεις απόδοσης και επανάληψη της περιόδου λειτουργίας χρήστη. Η χρήση ενός συστήματος παρακολούθησης απόδοσης με την εφαρμογή React Native θα σας επιτρέψει να εντοπίσετε τα σημεία συμφόρησης απόδοσης για να διορθώσετε και να κλιμακώσετε την εφαρμογή σας.
Ακολουθεί μια λίστα με πολλά διαθέσιμα εργαλεία PMC.
- React Native Debugger: Μια αυτόνομη εφαρμογή που σας επιτρέπει να εντοπίσετε σφάλματα και να επιθεωρήσετε την κατάσταση της εφαρμογής React Native. Περιλαμβάνει επίσης μια παρακολούθηση απόδοσης για να σας βοηθήσει να εντοπίσετε και να διορθώσετε προβλήματα απόδοσης.
- React Native Profiler: Αυτό το ενσωματωμένο εργαλείο παρακολούθησης απόδοσης σάς επιτρέπει να παρακολουθείτε την απόδοση της εφαρμογής σας μετρώντας το χρόνο που χρειάζεται για την απόδοση κάθε στοιχείου.
- Flipper: Μια πλατφόρμα ανάπτυξης εφαρμογών για κινητά με οθόνη επιδόσεων που μπορεί να σας βοηθήσει να εντοπίσετε και να διορθώσετε προβλήματα απόδοσης.
- Firebase Performance Monitoring: Ένα εργαλείο παρακολούθησης απόδοσης που παρέχεται από το Firebase και σας επιτρέπει να παρακολουθείτε την απόδοση της εφαρμογής σας σε διαφορετικές συσκευές και πλατφόρμες.
4. Κατάργηση δηλώσεων Console.log
Όταν εκτελείται μια πρόταση console.log, στέλνει ένα μήνυμα στη μηχανή JavaScript για να καταγράψει το μήνυμα στην κονσόλα. Στη συνέχεια, ο κινητήρας JS χρειάζεται χρόνο για να επεξεργαστεί και να εμφανίσει το μήνυμα.
Πάρα πολλές δηλώσεις κονσόλας στον κώδικά σας θα επιβραδύνουν την εκτέλεσή του και θα προκαλέσουν καθυστερήσεις στην απόδοση. Αυτό μπορεί να είναι ιδιαίτερα προβληματικό όταν η εφαρμογή σας εκτελείται σε μια συσκευή με περιορισμένους πόρους, όπως μια φορητή συσκευή χαμηλού επιπέδου.
5. Δημιουργήστε ένα αποτελεσματικό σύστημα πλοήγησης
Ένα καλό σύστημα πλοήγησης θα βελτιώσει τη συνολική δομή της εφαρμογής React Native, καθιστώντας ευκολότερη τη συντήρηση, την ενημέρωση λειτουργιών και τη μεταφορά δεδομένων κατάστασης αποτελεσματικά. Επιπλέον, διευκολύνει πολύ την εναλλαγή μεταξύ πολλαπλών οθονών στην εφαρμογή σας, βελτιώνοντας την εμπειρία χρήστη.
Θα πρέπει να λάβετε υπόψη παράγοντες όπως το σωστό μοτίβο πλοήγησης (βασισμένο σε καρτέλες, σε στοίβα, σε συρτάρια κ.λπ.) που ταιριάζουν στην εφαρμογή σας. Λάβετε υπόψη τον αριθμό των οθονών που περιμένετε στην εφαρμογή σας και πώς θα μεταβιβάζετε δεδομένα κατάστασης μεταξύ τους.
Η προσωρινή αποθήκευση είναι μια χρήσιμη μέθοδος για την ανάπτυξη ενός αξιόπιστου συστήματος πλοήγησης. Η προσωρινή αποθήκευση σάς επιτρέπει να αποθηκεύετε την κατάσταση μιας οθόνης ή ενός στοιχείου όταν ο χρήστης το εγκαταλείπει και, στη συνέχεια, να το επαναφέρετε όταν επιστρέψει. Αυτό βοηθάει στην ελαχιστοποίηση του όγκου των δεδομένων που πρέπει να φορτώσετε και του αριθμού των φορών που χρειάζεται να αποδώσετε ξανά.
Το React Native έχει αρκετές βιβλιοθήκες διαθέσιμες για πλοήγηση, όπως το React Navigation και το React Native Navigation. Μπορείτε να τα χρησιμοποιήσετε για να εφαρμόσετε μερικά από αυτά τα κοινά μοτίβα πλοήγησης στην εφαρμογή σας.
6. Μειώστε το μέγεθος της εφαρμογής με διαχωρισμό κώδικα και τεμπέλης φόρτωση
Το μέγεθος της εφαρμογής είναι σημαντικό για βελτιστοποιημένη απόδοση, επειδή μπορεί να επηρεάσει πτυχές της εμπειρίας χρήστη, όπως ο χρόνος αρχικής φόρτωσης, η χρήση μνήμης και ο χώρος αποθήκευσης.
Ο διαχωρισμός κώδικα και η τεμπέλης φόρτωση είναι τεχνικές που μπορούν να μειώσουν το μέγεθος της εφαρμογής React Native και να βελτιώσουν την απόδοση.
Ο διαχωρισμός κώδικα είναι η διαδικασία διάσπασης μιας μεγάλης βάσης κώδικα JavaScript σε μικρότερα, πιο διαχειρίσιμα "πακέτα". Αυτό μπορεί να μειώσει σημαντικά τον αρχικό χρόνο φόρτωσης της εφαρμογής.
Η Lazy loading είναι μια τεχνική που σας επιτρέπει να φορτώνετε στοιχεία καθώς ο χρήστης πλοηγείται σε αυτά και όχι κατά την εκκίνηση. Αυτό μπορεί να βοηθήσει στη μείωση της ποσότητας της μνήμης που χρησιμοποιεί η εφαρμογή σας και στη βελτίωση της συνολικής απόδοσης.
Γιατί είναι σημαντική η βελτιστοποίηση απόδοσης
Η βελτιστοποίηση απόδοσης είναι ζωτικής σημασίας για την επιτυχία οποιασδήποτε εφαρμογής για κινητά. Μια αργή εφαρμογή μπορεί να οδηγήσει σε κακή εμπειρία χρήστη και τελικά να οδηγήσει σε χαμηλή αφοσίωση και διατήρηση.
Αυτά τα κόλπα είναι μόνο μερικοί τρόποι που μπορείτε να χρησιμοποιήσετε για να εξασφαλίσετε μια ευχάριστη εμπειρία για τη βάση χρηστών της εφαρμογής σας.