React useMemo 实际开发使用小结-Toy模板网

这篇具有很好参考价值的文章主要介绍了React useMemo 实际开发使用小结。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React useMemo 实际开发使用小结,react.js,前端,前端框架,javascript,antd

基本原理

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 可能会导致代码复杂性增加，不利于维护和理解。文章来源地址https://www.toymoban.com/news/detail-599769.html

到了这里，关于React useMemo 实际开发使用小结的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！