useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• 参考
  • useMemo(calculateValue, dependencies)
• 用法
  • 跳过代价昂贵的重新计算
  • 跳过组件的重新渲染
  • 防止过于频繁地触发 Effect
  • 记忆另一个 Hook 的依赖
  • 记忆一个函数
• 故障排除
  • 每次重新渲染时计算函数都会运行两次
  • 我调用的 useMemo 应该返回一个对象，但返回了 undefined
  • 组件每次渲染时，useMemo 都会重新计算
  • 我需要为循环中的每个列表项调用 useMemo，但这是不允许的

参考

useMemo(calculateValue, dependencies)

在组件的顶层调用 useMemo 来缓存每次重新渲染都需要计算的结果。

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

参见下面更多示例。

参数

• calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。

• dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。如果你在代码检查工具中 配置了 React，它将会确保每一个响应式数据都被正确地定义为依赖项。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用 Object.is 将每个依赖项与其之前的值进行比较。

返回值

在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果。

在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。

注意

• useMemo 是一个 React Hook，所以你只能 在组件的顶层 或者自定义 Hook 中调用它。你不能在循环语句或条件语句中调用它。如有需要，将其提取为一个新组件并使用 state。
• 在严格模式下，为了 帮你发现意外的错误，React 将会 调用你的计算函数两次。这只是一个开发环境下的行为，并不会影响到生产环境。如果计算函数是一个纯函数（它本来就应该是），这将不会影响到代码逻辑。其中一次的调用结果将被忽略。
• 除非有特定原因，React 不会丢弃缓存值。例如，在开发过程中，React 会在你编辑组件文件时丢弃缓存。无论是在开发环境还是在生产环境，如果你的组件在初始挂载期间被终止，React 都会丢弃缓存。在未来，React 可能会添加更多利用丢弃缓存的特性——例如，如果 React 在未来增加了对虚拟化列表的内置支持，那么丢弃那些滚出虚拟化列表视口的缓存是有意义的。你可以仅仅依赖 useMemo 作为性能优化手段。否则，使用 state 变量 或者 ref 可能更加合适。

用法

跳过代价昂贵的重新计算

在组件顶层调用 useMemo 以在重新渲染之间缓存计算结果：

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

你需要给 useMemo 传递两样东西：

1. 一个没有任何参数的 calculation 函数，像这样 () =>，并且返回任何你想要的计算结果。
2. 一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。

在初次渲染时，你从 useMemo 得到的 值 将会是你的 calculation 函数执行的结果。

在随后的每一次渲染中，React 将会比较前后两次渲染中的 所有依赖项 是否相同。如果通过 Object.is 比较所有依赖项都没有发生变化，那么 useMemo 将会返回之前已经计算过的那个值。否则，React 将会重新执行 calculation 函数并且返回一个新的值。

换言之，useMemo 在多次重新渲染中缓存了 calculation 函数计算的结果直到依赖项的值发生变化。

让我们通过一个示例来看看这在什么情况下是有用的。

默认情况下，React 会在每次重新渲染时重新运行整个组件。例如，如果 TodoList 更新了 state 或从父组件接收到新的 props，filterTodos 函数将会重新运行：

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

如果计算速度很快，这将不会产生问题。但是，当正在过滤转换一个大型数组，或者进行一些昂贵的计算，而数据没有改变，那么可能希望跳过这些重复计算。如果 todos 与 tab 都与上次渲染时相同，那么像之前那样将计算函数包装在 useMemo 中，便可以重用已经计算过的 visibleTodos。

这种缓存行为叫做 记忆化。

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // 如果 todos 和 tab 都没有变化，那么将会跳过渲染。
}, [todos, tab]);
console.timeEnd('filter array');