Η απομνημόνευση είναι μια τεχνική βελτιστοποίησης, παρόμοια με την προσωρινή αποθήκευση. Λειτουργεί αποθηκεύοντας τα προηγούμενα αποτελέσματα μιας κλήσης συνάρτησης και χρησιμοποιώντας αυτά τα αποτελέσματα την επόμενη φορά που θα εκτελεστεί η λειτουργία. Είναι ιδιαίτερα χρήσιμο σε εφαρμογές με μεγάλους υπολογισμούς που επαναλαμβάνουν κλήσεις συναρτήσεων με τις ίδιες παραμέτρους.

Μπορείτε να χρησιμοποιήσετε την απομνημόνευση σε απλή JavaScript και επίσης στο React, με μερικούς διαφορετικούς τρόπους.

Απομνημόνευση σε JavaScript

Για να απομνημονεύσετε μια συνάρτηση σε JavaScript, πρέπει να αποθηκεύσετε τα αποτελέσματα αυτής της συνάρτησης σε μια προσωρινή μνήμη. Η κρυφή μνήμη μπορεί να είναι ένα αντικείμενο με τα ορίσματα ως κλειδιά και τα αποτελέσματα ως τιμές.

Όταν καλείτε αυτήν τη συνάρτηση, πρώτα ελέγχει εάν το αποτέλεσμα είναι παρόν στη μνήμη cache πριν από την εκτέλεση. Εάν είναι, επιστρέφει τα αποθηκευμένα αποτελέσματα. Διαφορετικά, εκτελείται.

Σκεφτείτε αυτή τη συνάρτηση:

λειτουργίατετράγωνο(αρ) {
ΕΠΙΣΤΡΟΦΗ αρ. * αρ
}
instagram viewer

Η συνάρτηση δέχεται ένα όρισμα και επιστρέφει το τετράγωνό της.

Για να εκτελέσετε τη λειτουργία, καλέστε την με έναν αριθμό όπως αυτός:

τετράγωνο(5) // 25

Με το 5 ως όρισμα, το square() θα τρέξει αρκετά γρήγορα. Ωστόσο, αν υπολογίζατε το τετράγωνο των 70.000, θα υπήρχε μια αισθητή καθυστέρηση. Όχι πολύ, αλλά με καθυστέρηση. Τώρα, αν καλούσατε τη συνάρτηση πολλές φορές και περάσατε 70.000, θα είχατε μια καθυστέρηση σε κάθε κλήση.

Μπορείτε να εξαλείψετε αυτήν την καθυστέρηση χρησιμοποιώντας την απομνημόνευση.

συνθ memoizedSquare = () => {
 αφήνω κρύπτη = {};
ΕΠΙΣΤΡΟΦΗ (αριθμός) => {
 εάν (αριθμός σε κρύπτη) {
 console.log('Επαναχρησιμοποίηση αποθηκευμένης τιμής');
 ΕΠΙΣΤΡΟΦΗ κρύπτη[αρ];
 } αλλού {
 console.log('Υπολογισμός αποτελέσματος');
αφήνω αποτέλεσμα = num * num;
// κρύπτη ο νέοςαποτέλεσμααξίαΓιαΕπόμενοχρόνος
κρύπτη[αρ] = αποτέλεσμα;
ΕΠΙΣΤΡΟΦΗ αποτέλεσμα;
 }
 }
 }

Σε αυτό το παράδειγμα, η συνάρτηση ελέγχει αν έχει υπολογίσει το αποτέλεσμα πριν, ελέγχοντας εάν υπάρχει στο αντικείμενο της κρυφής μνήμης. Εάν έχει, επιστρέφει την ήδη υπολογισμένη τιμή.

Όταν η συνάρτηση λαμβάνει έναν νέο αριθμό, υπολογίζει μια νέα τιμή και αποθηκεύει τα αποτελέσματα στην κρυφή μνήμη πριν επιστρέψει.

Και πάλι αυτό το παράδειγμα είναι αρκετά απλό, αλλά εξηγεί πώς η απομνημόνευση θα λειτουργούσε για τη βελτίωση της απόδοσης ενός προγράμματος.

Θα πρέπει να απομνημονεύσετε μόνο καθαρές λειτουργίες. Αυτές οι συναρτήσεις επιστρέφουν το ίδιο αποτέλεσμα όταν μεταφέρετε τα ίδια ορίσματα. Εάν χρησιμοποιείτε απομνημόνευση σε ακάθαρτες λειτουργίες, δεν θα βελτιώσετε την απόδοση αλλά θα αυξήσετε τα γενικά σας έξοδα. Αυτό συμβαίνει επειδή επιλέγετε την ταχύτητα αντί της μνήμης κάθε φορά που απομνημονεύετε μια λειτουργία.

Απομνημόνευση στο React

Εάν θέλετε να βελτιστοποιήσετε τα στοιχεία του React, το React παρέχει απομνημόνευση μέσω του άγκιστρου useMemo(), του React.memo και του useCallBack().

Χρήση useMemo()

useMemo() είναι α React hook που δέχεται μια συνάρτηση και έναν πίνακα εξάρτησης.

συνθ memoizedValue = useMemo(() => computeExpensiveValue (a, b), [a, b]);

Απομνημονεύει την τιμή που επιστρέφεται από αυτήν τη συνάρτηση. Οι τιμές στον πίνακα εξάρτησης υπαγορεύουν πότε εκτελείται η συνάρτηση. Μόνο όταν αλλάξουν, η συνάρτηση εκτελείται ξανά.

Για παράδειγμα, το ακόλουθο στοιχείο εφαρμογής έχει μια απομνημονευμένη τιμή που ονομάζεται αποτέλεσμα.

εισαγωγή { useMemo } από "αντιδρώ"
λειτουργίαApp(αξία) {
συνθ τετράγωνο = (τιμή) => {
ΕΠΙΣΤΡΟΦΗ τιμή * αξία
 }
συνθ αποτέλεσμα = useMemo(
 () => τετράγωνο (τιμή), 
[ αξία ]
 );
ΕΠΙΣΤΡΟΦΗ (
<div>{αποτέλεσμα (5)}</div>
 )
}

Το στοιχείο της εφαρμογής καλεί την πλατεία() σε κάθε απόδοση. Η απόδοση θα υποβαθμιστεί εάν το στοιχείο της εφαρμογής αποδοθεί πολλές φορές λόγω Αντιδράστε στηρίγματα αλλαγή ή ενημέρωση κατάστασης, ειδικά εάν η συνάρτηση Square() είναι ακριβή.

Ωστόσο, δεδομένου ότι η useMemo() αποθηκεύει προσωρινά τις επιστρεφόμενες τιμές, η συνάρτηση τετράγωνου δεν εκτελείται σε κάθε re-render εκτός εάν αλλάξουν τα ορίσματα στον πίνακα εξάρτησης.

Χρήση του React.memo()

Το React.memo() είναι ένα στοιχείο υψηλότερης τάξης που δέχεται ένα στοιχείο React και μια συνάρτηση ως ορίσματα. Η συνάρτηση καθορίζει πότε πρέπει να ενημερωθεί το στοιχείο.

Η λειτουργία είναι προαιρετική και, αν δεν παρέχεται, το React.memo κάνει μια ρηχή αντιγραφή των τρεχόντων στηρίξεων του στοιχείου με τα προηγούμενα στηρίγματα. Εάν τα στηρίγματα είναι διαφορετικά, ενεργοποιείται μια ενημέρωση. Εάν τα στηρίγματα είναι τα ίδια, παραλείπει την εκ νέου απόδοση και επαναχρησιμοποιεί τις απομνημονευμένες τιμές.

Η προαιρετική συνάρτηση δέχεται τα προηγούμενα στηρίγματα και τα επόμενα στηρίγματα ως ορίσματα. Στη συνέχεια, μπορείτε να συγκρίνετε ρητά αυτά τα στηρίγματα για να αποφασίσετε εάν θα ενημερώσετε το στοιχείο ή όχι.

Αντιδρώ.σημείωμα(Συστατικό, [areEqual (prevProps, nextProps)])

Ας δούμε πρώτα ένα παράδειγμα χωρίς το όρισμα προαιρετικής συνάρτησης. Παρακάτω είναι ένα στοιχείο που ονομάζεται Σχόλια που δέχεται το όνομα και τα στηρίγματα email.

λειτουργίαΣχόλια ({όνομα, σχόλιο, μου αρέσει}) {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{όνομα}</Π>
<Π>{σχόλιο}</Π>
<Π>{μου αρέσει}</Π>
</div>
 )
}

Το στοιχείο απομνημονευμένων σχολίων θα έχει το React.memo τυλιγμένο γύρω του ως εξής:

συνθ MemoizedComment = React.memo (Σχόλιο)

Μπορείτε να καλέσετε και στη συνέχεια να το καλέσετε όπως οποιοδήποτε άλλο στοιχείο του React.

<Όνομα MemoizedComment="Μαρία" σχόλιο="Η απομνημόνευση είναι εξαιρετική" μου αρέσει=1/>

Εάν θέλετε να κάνετε μόνοι σας τη σύγκριση props, περάστε την παρακάτω συνάρτηση στο React.memo ως δεύτερο όρισμα.

εισαγωγή Αντιδρώ από "αντιδρώ"
λειτουργίαcheckCommentProps(prevProps, nextProps) {
ΕΠΙΣΤΡΟΦΗ prevProps.name nextProps.name
&& prevProps.comment nextProps.comment
&& prevProps.likes nextProps.likes
}
συνθ MemoizedComment = React.memo (Σχόλια, checkCommentProps)

Εάν το checkProfileProps επιστρέψει true, το στοιχείο δεν ενημερώνεται. Διαφορετικά, αποδίδεται εκ νέου.

Η προσαρμοσμένη λειτουργία είναι χρήσιμη όταν θέλετε να προσαρμόσετε την εκ νέου απόδοση. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να ενημερώσετε το στοιχείο Σχόλια μόνο όταν αλλάξει ο αριθμός των "μου αρέσει".

Σε αντίθεση με το άγκιστρο useMemo() που απομνημονεύει μόνο την επιστρεφόμενη τιμή μιας συνάρτησης, το React.memo απομνημονεύει ολόκληρη τη συνάρτηση.

Χρησιμοποιήστε το React.memo μόνο για καθαρά στοιχεία. Επίσης, για να μειώσετε το κόστος σύγκρισης, απομνημονεύστε μόνο στοιχεία των οποίων τα στηρίγματα αλλάζουν συχνά.

Χρήση useCallBack()

Μπορείτε να χρησιμοποιήσετε το άγκιστρο useCallBack() για απομνημόνευση εξαρτήματα λειτουργίας.

συνθ memoizedCallback = useCallback(
 () => {
 Κάνω Κάτι (α, β);
 },
[α, β],
);

Η συνάρτηση ενημερώνεται μόνο όταν αλλάξουν οι τιμές στον πίνακα εξαρτήσεων. Το άγκιστρο λειτουργεί όπως η επανάκληση useMemo(), αλλά απομνημονεύει το στοιχείο συνάρτησης μεταξύ των αποδόσεων αντί να απομνημονεύει τιμές.

Εξετάστε το ακόλουθο παράδειγμα μιας απομνημονευμένης συνάρτησης που καλεί ένα API.

εισαγωγή { useCallback, useEffect } από "αντιδρώ";
συνθ Συστατικό = () => {
συνθ getData = useCallback(() => {
 console.log('καλέστε ένα API');
 }, []);
 useEffect(() => {
 getData();
 }, [getData]);
 };

Η συνάρτηση getData() που καλείται στο useEffect θα κληθεί ξανά μόνο όταν αλλάξει η τιμή getData.

Πρέπει να Απομνημονεύσετε;

Σε αυτό το σεμινάριο, μάθατε τι είναι η απομνημόνευση, τα οφέλη της και πώς να την εφαρμόσετε σε JavaScript και React. Ωστόσο, πρέπει να γνωρίζετε ότι το React είναι ήδη γρήγορο. Στις περισσότερες περιπτώσεις, η απομνημόνευση στοιχείων ή τιμών προσθέτει κόστος σύγκρισης και δεν βελτιώνει την απόδοση. Εξαιτίας αυτού, απομνημονεύστε μόνο ακριβά εξαρτήματα.

Το React 18 εισήγαγε επίσης νέα άγκιστρα όπως useId, useTransition και useInsertionEffect. Μπορείτε να τα χρησιμοποιήσετε για να βελτιώσετε την απόδοση και την εμπειρία χρήστη των εφαρμογών React.