La memorizzazione è una tecnica di ottimizzazione, simile alla memorizzazione nella cache. Funziona memorizzando i risultati precedenti di una chiamata di funzione e utilizzando tali risultati la prossima volta che la funzione viene eseguita. È particolarmente utile nelle app pesanti per il calcolo che ripetono le chiamate di funzione sugli stessi parametri.

Puoi usare la memorizzazione in JavaScript semplice e anche in React, in diversi modi.

Memorizzazione in JavaScript

Per memorizzare una funzione in JavaScript, devi memorizzare i risultati di quella funzione in una cache. La cache può essere un oggetto con gli argomenti come chiavi e i risultati come valori.

Quando chiami questa funzione, controlla prima se il risultato è presente nella cache prima dell'esecuzione. Se lo è, restituisce i risultati memorizzati nella cache. In caso contrario, viene eseguito.

Considera questa funzione:

funzionequadrato(num) {
Restituzione num * num
}

La funzione accetta un argomento e restituisce il suo quadrato.

instagram viewer

Per eseguire la funzione, chiamala con un numero come questo:

quadrato(5) // 25

Con 5 come argomento, square() verrà eseguito abbastanza velocemente. Tuttavia, se dovessi calcolare il quadrato di 70.000, ci sarebbe un notevole ritardo. Non di molto, ma comunque un ritardo. Ora, se dovessi chiamare la funzione più volte e passare 70.000, sperimenteresti un ritardo in ogni chiamata.

Puoi eliminare questo ritardo usando la memorizzazione.

cost quadrato memorizzato = () => {
 permettere cache = {};
Restituzione (num) => {
 se (num in cache) {
 console.log('Riutilizzo del valore memorizzato nella cache');
 Restituzione cache[num];
 } altro {
 console.log('Calcolo del risultato');
permettere risultato = num * num;
// cache il nuovorisultatovaloreperprossimovolta
cache[num] = risultato;
Restituzione risultato;
 }
 }
 }

In questo esempio, la funzione controlla se è stato calcolato il risultato in precedenza, controllando se esiste nell'oggetto cache. Se ce l'ha restituisce il valore già calcolato.

Quando la funzione riceve un nuovo numero, calcola un nuovo valore e memorizza i risultati nella cache prima di restituire.

Anche in questo caso questo esempio è piuttosto semplice, ma spiega come funzionerebbe la memorizzazione per migliorare le prestazioni di un programma.

Dovresti memorizzare solo funzioni pure. Queste funzioni restituiscono lo stesso risultato quando si passano gli stessi argomenti. Se usi la memorizzazione su funzioni impure, non migliorerai le prestazioni ma aumenterai il tuo sovraccarico. Questo perché scegli la velocità rispetto alla memoria ogni volta che memorizzi una funzione.

Memorizzazione in reazione

Se stai cercando di ottimizzare i componenti di React, React fornisce la memorizzazione tramite l'hook useMemo(), React.memo e useCallBack().

Utilizzo di useMemo()

useMemo() è un Gancio di reazione che accetta una funzione e un array di dipendenza.

cost memoizedValue = useMemo(() => computeExpensiveValue (a, b), [a, b]);

Memorizza il valore restituito da quella funzione. I valori nella matrice di dipendenza determinano quando la funzione viene eseguita. Solo quando cambiano la funzione viene eseguita nuovamente.

Ad esempio, il seguente componente App ha un valore memorizzato chiamato risultato.

importare { useMemo } da "reagire"
funzioneApp(valore) {
cost quadrato = (valore) => {
Restituzione valore * valore
 }
cost risultato = usaMemo(
 () => quadrato (valore), 
[ valore ]
 );
Restituzione (
<div>{risultato (5)}</div>
 )
}

Il componente App chiama square() su ogni rendering. Le prestazioni diminuiranno se il componente dell'app viene renderizzato molte volte a causa di Reagisci oggetti di scena modifica o aggiornamento dello stato, specialmente se la funzione square() è costosa.

Tuttavia, poiché useMemo() memorizza nella cache i valori restituiti, la funzione quadrata non viene eseguita in ogni nuovo rendering a meno che gli argomenti nell'array di dipendenza non cambino.

Utilizzo di React.memo()

React.memo() è un componente di ordine superiore che accetta un componente React e una funzione come argomenti. La funzione determina quando il componente deve essere aggiornato.

La funzione è facoltativa e, se non fornita, React.memo esegue un confronto superficiale tra gli oggetti di scena correnti del componente e quelli precedenti. Se gli oggetti di scena sono diversi, viene attivato un aggiornamento. Se gli oggetti di scena sono gli stessi, salta il re-rendering e riutilizza i valori memorizzati.

La funzione opzionale accetta gli oggetti di scena precedenti e quelli successivi come argomenti. È quindi possibile confrontare esplicitamente questi prop per decidere se aggiornare o meno il componente.

Reagire.promemoria(Componente, [areEqual (prevProps, nextProps)])

Diamo prima un'occhiata a un esempio senza l'argomento della funzione opzionale. Di seguito è riportato un componente chiamato Commenti che accetta il nome e gli oggetti di scena e-mail.

funzioneCommenti ({nome, commento, mi piace}) {
Restituzione (
<div>
<p>{nome}</p>
<p>{commento}</p>
<p>{piace}</p>
</div>
 )
}

Il componente dei commenti memorizzati avrà React.memo avvolto attorno ad esso in questo modo:

cost MemoizedComment = React.memo (Commento)

Puoi chiamare quindi chiamarlo come qualsiasi altro componente React.

<MemoizedComment name="Maria" commento="La memorizzazione è fantastica" mi piace=1/>

Se vuoi eseguire tu stesso il confronto degli oggetti di scena, passa la seguente funzione a React.memo come secondo argomento.

importare Reagire da "reagire"
funzionecheckCommentProps(prevProps, nextProps) {
Restituzione prevProps.name nextProps.name
&& prevProps.comment nextProps.comment
&& prevProps.likes nextProps.likes
}
cost MemoizedComment = React.memo (Commenti, checkCommentProps)

Se checkProfileProps restituisce true, il componente non viene aggiornato. In caso contrario, viene riprodotto.

La funzione personalizzata è utile quando si desidera personalizzare il re-rendering. Ad esempio, puoi usarlo per aggiornare il componente Commenti solo quando il numero di Mi piace cambia.

A differenza dell'hook useMemo() che memorizza solo il valore restituito di una funzione, React.memo memorizza l'intera funzione.

Utilizzare React.memo solo per componenti puri. Inoltre, per ridurre i costi di confronto, memorizza solo i componenti i cui oggetti di scena cambiano spesso.

Utilizzo di useCallBack()

Puoi usare l'hook useCallBack() per memorizzare componenti della funzione.

cost MemoizedCallback = useCallback(
 () => {
 fare qualcosa (a, b);
 },
[a, b],
);

La funzione viene aggiornata solo quando cambiano i valori nell'array di dipendenze. L'hook funziona come il callback useMemo(), ma memorizza il componente della funzione tra i rendering invece di memorizzare i valori.

Considera l'esempio seguente di una funzione memorizzata che chiama un'API.

importare { useCallback, useEffect } da "reagire";
cost Componente = () => {
cost getData = useCallback(() => {
 console.log('chiama un'API');
 }, []);
 useEffect(() => {
 getData();
 }, [getData]);
 };

La funzione getData() chiamata in useEffect verrà richiamata di nuovo solo quando il valore getData cambia.

Dovresti memorizzare?

In questo tutorial, hai imparato cos'è la memorizzazione, i suoi vantaggi e come implementarla in JavaScript e React. Tuttavia, dovresti sapere che React è già veloce. Nella maggior parte dei casi, la memorizzazione di componenti o valori aggiunge costi di confronto e non migliora le prestazioni. Per questo motivo, memorizza solo componenti costosi.

React 18 ha anche introdotto nuovi hook come useId, useTransition e useInsertionEffect. Puoi usarli per migliorare le prestazioni e l'esperienza utente delle applicazioni React.