useMemo和useCallback到底有什么区别

不知道大家在工作中有没有用到 useMemouseCallback 这两个钩子,笔者总是忘记这两者的区别,现在写一篇记录彻底搞懂这两个 Hook 的区别。

useMemouseCallback 它们都用于优化性能,它们主要是用途有所不同。

useMemo

useMemo 用于记忆一个计算值。当你有一个性能消耗比较大的计算操作,并且你不希望在每次组件渲染时都重新计算它时,你可以使用 useMemo。这个钩子只有在其依赖项发生变化时才会重新计算记忆值。

jsx 复制代码
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个例子中,computeExpensiveValue 只有在 ab 改变时才会重新执行。如果不用useMemo 钩子,就会每次在组件渲染时计算。造成性能浪费。

useCallback

useCallback 用于记忆一个函数实例。主要应用于将函数作为 props 传递给子组件的场景,特别是当这些子组件使用了 React.memoshouldComponentUpdate 时。如果你不使用 useCallback,那么每次父组件渲染时都会创建一个新的函数实例,即使这个函数的实际代码并没有改变。此时,就会导致子组件也会重新渲染。

jsx 复制代码
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

在这个例子中,只有当 ab 改变时,函数 doSomething 的实例才会改变。

主要区别

  • 用途useMemo 用于缓存计算结果,useCallback 用于缓存函数实例。
  • 返回值useMemo 返回的是函数执行的结果,useCallback 返回的是函数本身。
  • 使用场景
    • 使用 useMemo 当你需要避免在每次渲染时都进行昂贵的计算。
    • 使用 useCallback 当你需要将相同的回调函数传递给优化过的子组件,以避免不必要的渲染。

在实际应用中,应该避免过度使用这些钩子,因为不恰当的使用可能会导致性能问题,而不是优化。例如,过度使用 useMemouseCallback 可能会导致内存占用增加,因为记忆的值和函数实例需要被存储在内存中。

相关推荐
codelang1 小时前
Cline + MCP 开发实战
前端·后端
好_快2 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel3 小时前
webpack 核心编译器 十四 节
前端
excel3 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队10 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰13 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪13 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪13 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试