Reagovat useMemo
Hook
React useMemo
Hook vrací hodnotu uloženou v paměti.
Pamatování si představte jako ukládání hodnoty do mezipaměti, aby ji nebylo nutné přepočítávat.
Hook běží pouze tehdy, když se useMemo
aktualizuje jedna z jeho závislostí.
To může zlepšit výkon.
The useMemo
a useCallback
Hooks jsou podobné. Hlavní rozdíl je v tom, že useMemo
vrací zapamatovanou hodnotu a
useCallback
vrací zapamatovanou funkci. Více se můžete dozvědět useCallback
v kapitole useCallback .
Výkon
useMemo
Hook lze použít k tomu, aby drahé funkce náročné na zdroje zbytečně neběžely .
V tomto příkladu máme drahou funkci, která běží na každém renderu.
Při změně počtu nebo přidání úkolu zaznamenáte zpoždění v provádění.
Příklad:
Špatně vykonávaná funkce. Funkce expensiveCalculation
běží na každém renderu:
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'));
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
PoužitíuseMemo
K vyřešení tohoto problému s výkonem můžeme použít useMemo
Hook k zapamatování expensiveCalculation
funkce. To způsobí, že se funkce spustí pouze v případě potřeby.
Můžeme zabalit volání drahé funkce pomocí useMemo
.
useMemo
Hook přijímá druhý parametr pro deklaraci závislostí . Drahá funkce se spustí pouze tehdy, když se změní její závislosti.
V následujícím příkladu bude drahá funkce spuštěna pouze tehdy, když count
je změněna, a nikoli, když jsou přidány úkoly.
Příklad:
Příklad výkonu pomocí useMemo
háku:
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'));