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

相关推荐
我不吃饼干6 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇7 小时前
前端PerformanceObserver
前端
王者鳜錸7 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录7 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry8 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明8 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask8 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE9 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack9 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住10 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js