useCallback — 关键概念，React 中的函数记忆化 Hook

React 中的 useCallback 是什么

useCallback — 是在 React 16.8 中添加的 Hook，用于对函数进行记忆化：在依赖项发生变化之前，它返回相同的引用。如果没有 useCallback，组件内部每次声明函数都会在每次渲染时创建新的函数对象。对于基本类型来说这不可察觉，但当把这类回调传递给通过 React.memo 优化的子组件时，每个新引用都会导致子组件重渲染。

从语法上讲，useCallback 对于函数来说等同于 useMemo：useCallback(fn, deps) 是 useMemo(() => fn, deps) 的简写。React 将记忆化的函数存储在 fiber 节点的内部存储中，并在每次渲染时比较依赖项。如果依赖项没有变化（每个元素使用 Object.is），则返回之前的函数。

根据 React Documentation — useCallback (2025)，不必把每个函数都包装到 useCallback 中。该 Hook 有其自身的代价：调用 Hook、比较依赖项以及为依赖数组分配内存。如果组件很简单，没有与 React.memo 配合的深层组件树——useCallback 只会拖慢应用。优化必须是可衡量的，而不是凭直觉。

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // 稳定引用——在 deps 变化前始终是同一函数
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

函数记忆化如何工作

useCallback 中的记忆化基于缓存函数调用的结果。React 保留在第一次渲染时创建的闭包，并在后续渲染中返回它，只要依赖项保持不变。在 fiber 节点内部，每次调用 useCallback 都会在 Hook 的链表中创建一个节点，用于存储先前的依赖项和记忆化的值。

依赖项的比较过程严格通过 Object.is 进行——这是一种浅比较，不深入检查对象或数组。如果依赖项中有对象或数组，每次渲染的新引用都会被当作变化。因此，在依赖数组中需要传递基本类型的值或稳定引用（例如来自 useRef 或 useMemo）。

根据 React Core Team — Optimization Guide (2024)，记忆化的成本包括三个部分：每次渲染时分配依赖数组、通过 Object.is 遍历和比较元素，以及在重新创建时垃圾回收的潜在开销。对于包含数百个 useCallback 包装的组件来说，这可能会变得明显——因此，在使用 Hook 时选择性至关重要。

useCallback 与性能

有一个广为流传的误区，认为 useCallback 会自动提高性能。实际上，在孤立使用（没有 React.memo）时，useCallback 甚至会因为依赖比较的成本而略微降低应用速度。该 Hook 只有在三种场景中才真正有用：防止 React.memo 组件重渲染、确保 useEffect 中回调的稳定性，以及传递给依赖 reference equality 的自定义 Hook。

规则很简单：在通过 React DevTools Profiler 发现性能问题之前——不要使用 useCallback。React 团队多次强调，过早优化是万恶之源。先编写不使用记忆化的干净代码，进行测量，在分析器里找到瓶颈，然后才在真正需要的地方添加 useCallback。

// 可衡量的优化：Child 被 React.memo 包装
const Child = React.memo(({ onClick }) => {
    console.log('Child 被重渲染');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('已点击');
    }, []);
    return <Child onClick={handleClick} />;
}

根据 Dan Abramov — Before You memo() (2024)，在开源项目中，超过 90% 的 useCallback 使用都是多余的。开发者们为了保险起见包装每个函数，却从不衡量效果。替代方案：如果子组件很重，重渲染成本高——React.memo + useCallback 是合理的。如果子组件很轻——重渲染比比较依赖项更便宜。

何时使用 useCallback

第一种场景——React.memo。如果子组件被 React.memo 包装并接收回调函数作为 prop，那么没有 useCallback 时，子组件会在父组件每次渲染时被重绘，即使它自己的数据没有变化。useCallback 稳定了引用，React.memo 就能正确跳过重渲染。

第二种场景——useEffect 的依赖中包含回调。如果函数被传入 useEffect 的依赖数组，每个新引用都会重新运行效果。useCallback 确保引用稳定，效果只在真实数据变化时执行，而不是每次渲染。这对于订阅和请求尤其重要。

• React.memo children — 在传递回调时防止已记忆化的子组件重渲染。
• useEffect dependencies — 稳定效果依赖数组中的函数，防止不必要的重新运行。
• 自定义 Hook — 如果 Hook 接收回调并依赖其 reference equality，则 useCallback 是必需的。
• Context value — 如果函数被传递给上下文的 value，useMemo 与 useCallback 一起稳定引用。

// useCallback 用于稳定的 useEffect 依赖
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // 稳定引用，永远不会重新创建

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // 效果仅在 props.id 变化时运行

useCallback 与 useMemo 对比

useCallback 和 useMemo 之间的主要区别在于各自记忆化什么。useCallback 记忆化函数：useCallback(fn, deps) 返回 fn（相同或之前的版本）。useMemo 记忆化函数调用的结果：useMemo(() => computeExpensive(a, b), [a, b]) 返回计算出的值，而不是函数。

从技术上讲，useCallback 是 useMemo 之上的语法糖：useCallback(fn, deps) 等同于 useMemo(() => fn, deps)。这种语法仅仅是为了可读性——让开发者清楚地看到被记忆化的正是函数，而不是值。useCallback 和带函数的 useMemo 之间没有性能差异——它们生成相同的代码。

// 这些是等价的：
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

useCallback 的常见错误

最常见的错误——在子组件上没有 React.memo 的情况下，把所有函数毫无意义地包装到 useCallback 中。如果子组件没有被 React.memo 包装，它仍然会在父组件每次渲染时重渲染，无论回调的引用是否变化。没有 React.memo 的 useCallback——只有成本，没有收益。

• 没有 React.memo 的 useCallback — 子组件仍然会重渲染；优化毫无意义。
• 遗漏的依赖 — 如果回调内部使用了未在 deps 中列出的变量，回调会包含 stale closure。
• 过度记忆化 — 包装每个函数，包括带 console.log 的平凡 onClick。
• 依赖中的对象和数组 — 每次渲染的新引用都被当作变化，记忆化毫无用处。

// ❌ 无用：child 上没有 React.memo
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // 没有 React.memo，Child 仍然会重渲染

// ❌ Stale closure：缺少依赖
const handle = useCallback(() => {
    console.log(count); // count 始终为 0 —— stale closure！
}, []);

// ✅ 正确：包含依赖项
const handle = useCallback(() => {
    console.log(count);
}, [count]);

useCallback 中的 stale closure 问题通过在依赖数组中列出所有使用的变量来解决。带有 exhaustive-deps 的 eslint-plugin-react-hooks 会自动检查回调主体中的所有变量是否都在数组中。如果回调使用了在渲染之间不会改变的 setState，可以安全地将其列入 deps——React 保证 setState 的稳定性。