React useMemo
Hook
React 的 useMemo
Hook 返回一个记忆化的值。
可以将记忆化看作是缓存一个值,使其无需重新计算。
只有当 useMemo
Hook 的依赖项更新时,它才会运行。
这可以提高性能。
useMemo
和 useCallback
Hook 类似。主要区别在于 useMemo
返回一个记忆化的值,而 useCallback
返回一个记忆化的函数。你可以在 useCallback 章节 中了解更多关于 useCallback
的信息。
性能
useMemo
Hook 可用于防止昂贵的、资源密集型的函数不必要地运行。
在此示例中,我们有一个昂贵的函数,它在每次渲染时都会运行。
更改计数器或添加待办事项时,您会注意到执行存在延迟。
示例
一个性能不佳的函数。 expensiveCalculation
函数在每次渲染时都会运行
import { useState } from "react";
import ReactDOM from "react-dom/client";
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;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
使用 useMemo
为了解决这个性能问题,我们可以使用 useMemo
Hook 来记忆化 expensiveCalculation
函数。这将导致该函数仅在需要时运行。
我们可以将昂贵的函数调用包装在 useMemo
中。
useMemo
Hook 接受第二个参数来声明依赖项。仅当昂贵函数的依赖项发生更改时,该函数才会运行。
在下面的示例中,只有在 count
更改时,昂贵的函数才会运行,而不是在添加待办事项时运行。
示例
使用 useMemo
Hook 的性能示例
import { useState, useMemo } from "react";
import ReactDOM from "react-dom/client";
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;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);