React中useCallback如何优化性能？解析其函数缓存机制

1. useCallback是如何实现函数定义缓存的？ #

useCallback的缓存逻辑核心依赖依赖数组和内部的缓存机制：

• 第一次渲染时，它会把你传入的回调函数和依赖数组一起存储，同时返回这个回调的引用；
• 后续组件重渲染时，它会对比当前依赖数组与之前存储的依赖数组：
  • 若所有依赖项的值都未变化，直接返回之前缓存的函数引用；
  • 若任意一个依赖项发生变化，则重新创建新的回调函数、更新缓存，再返回新的引用。

你给出的示例代码存在一个小错误：依赖数组里的productid应该和props参数productId保持大小写一致，修正后的代码如下：

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
}

这里只有productId或referrer变化时，handleSubmit的引用才会更新，否则始终复用缓存的旧引用。

2. 为什么感觉传入useCallback的回调每次都被重复创建？ #

你测试的结论是对的：每次组件渲染时，写在useCallback里的箭头函数确实会生成一个新的实例。但useCallback的作用不是阻止这个箭头函数的创建，而是决定要不要把这个新实例作为返回值。

直白来说：

• 依赖不变时：useCallback会忽略这次新创建的函数，直接返回之前缓存的旧引用；
• 依赖变化时：useCallback会把新创建的函数缓存起来，再返回它的引用。

你看到的“每次生成新回调实例”是传入useCallback的字面量函数，但最终拿到的handleSubmit引用不一定是新的——这才是useCallback缓存的核心：稳定返回的函数引用，而非阻止函数字面量的创建。

3. useCallback到底在优化什么？ #

useCallback的核心价值不是“减少函数创建次数”（毕竟每次渲染还是会创建传入的那个函数），而是稳定函数引用，基于这个特性带来两个关键优化场景：

避免子组件不必要的重渲染 #

如果把handleSubmit这类函数作为props传给子组件，且子组件用React.memo（或类组件的shouldComponentUpdate）做了渲染优化，稳定的函数引用会让子组件判断“props未变化”，从而跳过不必要的重渲染，节省性能。

避免其他Hook不必要的触发 #

当把这个函数作为依赖传给useEffect、useMemo等Hook时，稳定的引用可以避免这些Hook因函数引用变化而触发不必要的执行。比如：

useEffect(() => {
  // 只有handleSubmit引用变化时才会执行这里的逻辑
}, [handleSubmit]);

如果不用useCallback，每次渲染handleSubmit都是新引用，会导致这个useEffect每次都重新执行，这通常不是预期行为。

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