Реагировать на useMemoкрючок
React useMemoHook возвращает запомненное значение.
Думайте о мемоизации как о кэшировании значения, чтобы его не нужно было пересчитывать.
Хук useMemoзапускается только при обновлении одной из его зависимостей.
Это может улучшить производительность.
Крючки useMemoи useCallbackпохожи. Основное отличие состоит в том, что useMemoвозвращает запомненное значение и
useCallbackвозвращает запомненную функцию. Вы можете узнать больше об useCallbackэтом в главе useCallback .
Представление
useMemoКрюк можно использовать для предотвращения ненужного запуска дорогостоящих и ресурсоемких функций .
В этом примере у нас есть дорогостоящая функция, которая запускается при каждом рендеринге.
При изменении счетчика или добавлении задачи вы заметите задержку в выполнении.
Пример:
Плохая исполнительская функция. Функция expensiveCalculationзапускается при каждом рендере:
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'));
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Использовать useMemo
Чтобы решить эту проблему с производительностью, мы можем использовать useMemoхук для запоминания expensiveCalculationфункции. Это приведет к тому, что функция будет работать только тогда, когда это необходимо.
Мы можем обернуть дорогостоящий вызов функции с помощью useMemo.
Хук useMemoпринимает второй параметр для объявления зависимостей. Дорогая функция будет работать только тогда, когда ее зависимости изменились.
В следующем примере дорогостоящая функция будет выполняться только при count
изменении, а не при добавлении задач.
Пример:
Пример производительности с использованием useMemoхука:
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'));