React useMemo 实际开发使用小结

基本原理

useMemo 的原理是基于 memoization 技术。当你使用 useMemo 时，它会在组件渲染过程中缓存函数的计算结果，并在下一次渲染时，仅在依赖项（dependencies）发生变化时重新计算。如果依赖项没有发生变化，则直接返回之前缓存的结果，避免不必要的重复计算。

在组件初次渲染时，useMemo 会执行计算函数，并将其返回值存储在内部的缓存中。

在下一次组件渲染时，useMemo 会检查依赖项数组中的每个元素是否与上一次渲染时的对应元素相同。如果依赖项数组中有任何一个元素发生了变化，useMemo 会重新执行计算函数，并更新缓存的结果。

如果依赖项数组中的所有元素在下一次渲染时与上一次渲染时的对应元素都相同，则 useMemo 将直接返回上一次缓存的结果，避免不必要的重复计算。

入参

useMemo 接受两个参数：一个是计算函数（通常是一个匿名函数），另一个是依赖项数组。

jsx

const memoizedValue = useMemo(() => {
  // 计算函数的逻辑
  // ...
}, [dependency1, dependency2, ...]);

使用场景

• 在实际开发中，感觉 useMemo 主要用于下面几种情况：
  • 用于缓存值，比如这个值需要进行复杂的格式化函数处理，比如后端接口的数据结构需要进行一系列函数的处理从而能被前端使用，每次这个值变化就调用这个格式化函数处理得到可用的值。
  • 缓存一些数组，这个数组用于可以用于一些动态变化的组件，比如表格的列，下拉框的选项，form表单的字段路径
  • 缓存一些复杂 react 组件
  • 缓存路由的 url 筛选项改变引起 url 变化

  const drawer = useMemo(
    () => (
      <ErrorBoundary
        fallback={<div>xxx</div>}
        onError={() => message.error('xxx')}
      >
        <ClickxxxContainer>
          <TempRulexxx model={model} />
          <Drawer model={model} />
        </ClickxxxContainer>
      </ErrorBoundary>
    ),
    [model],
  )
  return [model, drawer]
}

使用 useMemo 的场景包括：

• 计算昂贵的函数，避免在每次渲染时都重新计算。
• 优化子组件的性能，避免子组件因为父组件的重新渲染而不必要地重新渲染。
• 缓存对外部变量的依赖，避免闭包中的函数因为外部变量的变化而重新定义。

注意

尽管上面说了很多 useMemo 的好处，但是并不是使用越多越好的
官方文档也说了：请注意，尽管 useMemo 可以提高性能，但不应滥用它。只有在确实有计算性能问题，并且计算结果具有稳定的依赖项时，才应该使用 useMemo。过度使用 useMemo 可能会导致代码复杂性增加，不利于维护和理解。