Skip to main content

useCallback和useMemo

useCallback​

  • 目的：useCallback 主要用于缓存函数实例。当你将函数传递给子组件或用于依赖列表时，使用 useCallback 可以避免因为组件的重新渲染而导致的不必要的函数重新创建，从而优化性能。

  • 使用场景：当你有一个函数，特别是传递给子组件的回调函数，并且你不希望这个函数在每次父组件渲染时都重新创建时，使用 useCallback。

  • 工作方式：它接受一个函数和一个依赖项数组。useCallback 会返回该函数的缓存版本，这个版本仅在依赖项改变时才更新。

const memoizedCallback = useCallback(
  () => {
    // 这里是需要执行的函数逻辑
  },
  [/* 依赖项列表 */],
);

useMemo​

  • 目的：useMemo 用于缓存计算结果。当你有一些复杂的计算或创建成本较高的对象时，使用 useMemo 可以在依赖项未改变的情况下重用之前的计算结果或对象，避免不必要的计算开销。

  • 使用场景：当组件中包含有昂贵的计算逻辑，并且你希望在依赖项未发生变化时重用上一次计算的结果时，使用 useMemo。

  • 工作方式：它接受一个“创建”函数和一个依赖项数组。只有当依赖项改变时，才会调用这个“创建”函数，并返回其计算结果。

const memoizedValue = useMemo(() => {
  // 这里是需要计算的逻辑
  return computeExpensiveValue(a, b);
}, [a, b]); // 只有当 a 或 b 改变时，才会重新计算

总结​

  • useCallback 用于缓存函数实例，避免不必要的函数重新创建。
  • useMemo 用于缓存昂贵的计算结果，避免不必要的计算开销。
  • 两者都接受一个依赖项数组，只有在依赖项改变时，它们各自缓存的内容才会更新。