React 第二十七章 Hook useMemo

useMemo 函数可以用于缓存计算结果,以避免不必要的重复计算。

在React的函数组件中,当组件重新渲染时,函数组件内的所有代码都会重新执行。有些计算可能是非常消耗资源的,例如进行复杂的计算或进行网络请求。如果这些计算的结果在组件重新渲染时保持不变,那么就没有必要在每次重新渲染时重新计算。

这时,可以使用useMemo来缓存计算结果。useMemo接受两个参数,第一个参数是一个函数,用于进行计算;第二个参数是一个数组,用于指定依赖项。只有当依赖项发生变化时,useMemo才会重新计算。否则,它会返回缓存的计算结果。

例如,假设有一个计算函数calculate,接受两个参数,根据这两个参数进行复杂的计算。可以使用useMemo来缓存计算结果:

const result = useMemo(() => calculate(param1, param2), [param1, param2]);

在上面的例子中,只有当param1param2发生变化时,calculate函数才会重新执行。否则,它会返回之前缓存的结果。

使用useMemo可以有效提高React函数组件的性能,特别是在处理大量数据或复杂计算的情况下。

useMemouseCallback 的区别及使用场景?

useMemouseCallback 接收的参数都是一样

  • 第一个参数为回调
  • 第二个参数为要依赖的数据。

共同作用:依赖数据发生变化,更新缓存。

两者区别:

  1. useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如:需要进行二次计算的状态
  2. useCallback 计算结果是函数, 主要用于缓存函数,应用场景如: 需要缓存的函数,因为函数式组件每次任何一个 state 的变化,整个组件都会被重新刷新,一些函数是没有必要被重新刷新的,此时就应该缓存起来,提高性能,和减少资源浪费。

相关推荐

  1. React 第二 Hook useMemo

    2024-05-09 14:30:02       13 阅读
  2. React 第二 React.memo

    2024-05-09 14:30:02       11 阅读
  3. 第二:Docker Nginx 部署

    2024-05-09 14:30:02       15 阅读
  4. React 第二 shouldComponentUpdate

    2024-05-09 14:30:02       10 阅读
  5. React 第二 前端框架

    2024-05-09 14:30:02       9 阅读
  6. 第二 TypeScript TS进阶用法infer

    2024-05-09 14:30:02       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-09 14:30:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-09 14:30:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-09 14:30:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-09 14:30:02       18 阅读

热门阅读

  1. Spring AI

    Spring AI

    2024-05-09 14:30:02      7 阅读
  2. Spring IoC&DI—DI详解

    2024-05-09 14:30:02       8 阅读
  3. 分布式数据库有哪几种

    2024-05-09 14:30:02       15 阅读
  4. FFmpeg压缩视频大小

    2024-05-09 14:30:02       9 阅读
  5. MySQL-存储引擎

    2024-05-09 14:30:02       13 阅读
  6. Redis-5 分布式锁

    2024-05-09 14:30:02       15 阅读
  7. Vue项目中使用echarts教程

    2024-05-09 14:30:02       14 阅读
  8. 探索深度学习的奥秘:从入门到进阶

    2024-05-09 14:30:02       10 阅读