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 可能会导致内存占用增加,因为记忆的值和函数实例需要被存储在内存中。

相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军4 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军4 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发5 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中5 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron