Gancio di useMemoreazione
Il React useMemoHook restituisce un valore memorizzato.
Pensa alla memorizzazione come alla memorizzazione nella cache di un valore in modo che non debba essere ricalcolato.
Hook viene eseguito solo quando una delle useMemosue dipendenze si aggiorna.
Questo può migliorare le prestazioni.
Gli useMemoe useCallbackHooks sono simili. La differenza principale è che useMemorestituisce un valore memorizzato e
useCallbackrestituisce una funzione memorizzata. Puoi saperne di più useCallbacknel capitolo useCallback .
Prestazione
L' useMemoHook può essere utilizzato per evitare che funzioni costose e ad alta intensità di risorse vengano eseguite inutilmente.
In questo esempio, abbiamo una funzione costosa che viene eseguita su ogni rendering.
Quando si modifica il conteggio o si aggiunge una cosa da fare, si noterà un ritardo nell'esecuzione.
Esempio:
Una funzione poco performante. La expensiveCalculationfunzione viene eseguita su ogni rendering:
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
Ottieni la certificazione!
ISCRIVITI A $95
UsouseMemo
Per risolvere questo problema di prestazioni, possiamo usare useMemoHook per memorizzare la expensiveCalculationfunzione. Ciò farà sì che la funzione venga eseguita solo quando necessario.
Possiamo avvolgere la costosa chiamata di funzione con useMemo.
useMemoHook accetta un secondo parametro per dichiarare le dipendenze . La funzione costosa verrà eseguita solo quando le sue dipendenze sono cambiate.
Nell'esempio seguente, la funzione costosa verrà eseguita solo quando count
viene modificata e non quando vengono aggiunte le cose da fare.
Esempio:
Esempio di performance usando l' useMemoHook:
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));