usemeno和usecallback区别及使用场景

1. useMemo

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

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

• 使用场景:

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

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

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

2. useCallback

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

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

• 使用场景:

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

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

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

总结

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

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

原文地址：https://blog.csdn.net/qq_25416827/article/details/142395851

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！