usemeno和usecallback区别及使用场景

1. useMemo

  • 用途 : useMemo 用于缓存计算结果。它接受一个函数和依赖项数组,只有当依赖项发生变化时,才会重新计算该函数的返回值。否则,它会返回缓存的值。

  • 返回值 : useMemo 返回的是函数执行后的结果

  • 使用场景:

    • 当一个计算量大的函数在每次渲染时都被调用,而计算结果在依赖项没有改变的情况下是相同的时,可以使用 useMemo 来避免重复计算,从而提高性能。

    • 例如,在渲染列表时,计算过滤后的列表或排序后的数据可以使用 useMemo 来缓存结果。

复制代码
javascript复制代码const filteredData = useMemo(() => {
  return data.filter(item => item.active);
}, [data]);

2. useCallback

  • 用途 : useCallback 用于缓存函数引用。它接受一个函数和依赖项数组,只有当依赖项发生变化时,才会返回一个新的函数引用。否则,它会返回缓存的函数引用。

  • 返回值 : useCallback 返回的是函数本身。

  • 使用场景:

    • 当一个函数被传递给子组件,或者作为依赖项传递给 useEffectuseMemouseContext 等 Hook 时,避免因函数重新创建导致子组件不必要的重新渲染,可以使用 useCallback

    • 例如,在子组件依赖于父组件传递的回调函数时,使用 useCallback 可以确保子组件只在必要时重新渲染。

复制代码
javascript复制代码const handleClick = useCallback(() => {
  console.log('Button clicked');
}, [dependency]);

总结

  • useMemo 是为了优化计算,避免不必要的重复计算。

  • useCallback 是为了优化函数,避免不必要的函数重新创建,减少子组件的重新渲染

相关推荐
刺客_Andy10 分钟前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js
刺客_Andy11 分钟前
React 第四十四节Router中 usefetcher的使用详解及注意事项
前端·javascript·react.js
刺客_Andy15 分钟前
React 第四十五节 Router 中 useHref() Hook的使用详解及注意事项
前端·javascript·react.js
需要兼职养活自己38 分钟前
react 之redux
前端·react.js·redux
ら陈佚晨42 分钟前
React 18 的核心设计理念:并发渲染
前端·javascript·react.js·前端框架·fiber
南城巷陌5 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
Dcc7 小时前
构建可维护的 React 应用:系统化思考 State 的分类与管理
前端·react.js
进阶的鱼7 小时前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
Gazer_S9 小时前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
.生产的驴9 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5