使用useMemo与useCallback缓存函数的区别是什么？

答案是：在功能效果上完全等价，但写法和语义上有区别。

核心原理 #

useCallback 本质就是 useMemo 的语法糖，官方文档也明确了：useCallback(fn, deps) 等同于 useMemo(() => fn, deps)。两者都会在依赖项不变时返回同一个函数引用，依赖项变化时生成新的函数。

看你给出的代码示例：

function Diff(props) {
  const { value } = props;

  const memoizedFnUsingMemo = useMemo(() => () => value + value, [value]);
  const memoizedFnUsingCallback = useCallback(() => value + value, [value]);
  return (
    <>
      <h1>{memoizedFnUsingMemo()}</h1>
      <h1>{memoizedFnUsingCallback()}</h1>
    </>
  );
}

export default function App() {
  const [counter, setCounter] = useState(0);

  function changeCounter(change) {
    setCounter((c) => c + change);
  }

  return (
    <div>
      <h1>counter: {counter}</h1>
      <button onClick={() => changeCounter(1)}> increment </button>
      <button onClick={() => changeCounter(-1)}> decrement </button>

      <Diff value={counter} />
    </div>
  );
}

这里 useMemo 通过外层箭头函数返回要缓存的函数，useCallback 直接传入要缓存的函数。当 value 不变时，两个变量都会持有同一个函数引用；当 value 更新，两者都会生成新的函数，调用后得到的结果也完全一致。

使用建议 #

• 虽然效果相同，但 useCallback 是专门为缓存函数设计的，写法更简洁，语义更明确，处理函数缓存时优先用它。
• useMemo 更适合缓存计算型的非函数值（比如复杂数组过滤、对象合并的结果），用来避免每次渲染重复执行昂贵计算。

内容的提问来源于stack exchange，提问作者DecPK