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 />);
