Reaguj useMemohak
React useMemoHook zwraca zapamiętaną wartość.
Pomyśl o zapamiętywaniu jako buforowaniu wartości, aby nie trzeba było jej ponownie obliczać.
Hook działa tylko wtedy useMemo, gdy jedna z jego zależności zostanie zaktualizowana.
Może to poprawić wydajność.
The useMemoi useCallbackHooki są podobne. Główna różnica polega na tym, że useMemozwraca zapamiętaną wartość i
useCallbackzwraca zapamiętaną funkcję. Możesz dowiedzieć się więcej useCallbackw rozdziale useCallback .
Wydajność
useMemoHook może być używany do zapobiegania niepotrzebnemu uruchamianiu kosztownych, zasobożernych funkcji .
W tym przykładzie mamy kosztowną funkcję, która działa przy każdym renderowaniu.
Zmieniając licznik lub dodając zadanie, zauważysz opóźnienie w wykonaniu.
Przykład:
Słabe działanie funkcji. Funkcja expensiveCalculationdziała przy każdym renderowaniu:
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'));
Zostać certyfikowanym!
95 $ ZAPISZ
Posługiwać się useMemo
Aby rozwiązać ten problem z wydajnością, możemy użyć useMemohooka do zapamiętania expensiveCalculationfunkcji. Spowoduje to, że funkcja będzie działać tylko w razie potrzeby.
Możemy opakować kosztowne wywołanie funkcji za pomocą useMemo.
useMemoHook akceptuje drugi parametr do deklarowania zależności . Kosztowna funkcja będzie działać tylko wtedy, gdy zmienią się jej zależności.
W poniższym przykładzie kosztowna funkcja będzie działać tylko wtedy, gdy count
zostanie zmieniona, a nie po dodaniu zadań do wykonania.
Przykład:
Przykład wydajności przy użyciu useMemoHooka:
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'));