一：定义

useCallback 和 useMemo 都是 React Hooks，用于优化 React 组件的性能。它们可以缓存计算结果，避免重复计算，提高组件的渲染效率。

主要区别是 React.useMemo 将调用 fn 函数并返回其结果，而 React.useCallback 将返回 fn 函数而不调用它

一：区别

1：useCallback 是用于缓存函数的 Hook，它的作用是当依赖发生变化时，只有缓存的函数引用发生变化，才会重新渲染组件

const memoizedCallback = useCallback(
  () => {
    // do something
  },
  [dep1, dep2, ...],
);

2：useMemo 是用于缓存值的 Hook，它的作用是在依赖发生变化时，只有缓存的值发生变化，才会重新渲染组件

const memoizedValue = useMemo(
  () => {
    // do something
    return someValue;
  },
  [dep1, dep2, ...],
);

三：总结

1：useCallback 缓存的是函数，useMemo 缓存的是值。

2：useCallback 返回的是一个函数引用，useMemo 返回的是一个值。

3：useCallback 的依赖数组中依赖变化时会返回新的函数引用，useMemo 的依赖数组中依赖变化时会重新计算值。