React useMemo Hook（钩子）

React useMemo 钩子返回一个已记忆的值。

可以将 记忆化 视为缓存一个值，这样就不需要重新计算它。

useMemo 钩子仅在其一个依赖项更新时运行。

这样可以提高性能。

您可以在 useCallback 一章中学习有关 useCallback 的更多知识。

执行

useMemo 钩子可以用来防止重量级的、资源密集型的函数不必要地运行。

在本例中，我们有一个在每个渲染上运行的重量级函数。

更改计数或添加 todo 时，您会注意到执行有延迟。

实例:

一个性能差的功能。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"));

使用 useMemo

为了解决这个性能问题，我们可以使用 useMemo 钩子来记忆 expensiveCalculation 函数。这将使该函数仅在需要时运行。

我们可以用 useMemo 包含重量级的函数调用。

useMemo Hook（钩子）接受第二个参数来声明依赖项。重量级的函数只有在其依赖项发生更改时才会运行。

在下面的示例中，重量级的函数将仅在 更改 计数时运行，而不会在添加 todo 时运行。

实例:

使用 useMemo Hook 执行实例:

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