useCallback 缓存回调

最后更新：2026-10-28

useCallback 缓存函数引用：依赖不变时返回同一个函数。把回调传给 memo 优化过的子组件时，它能阻止「父组件一渲染、子组件白渲染」——因为每次新建的函数引用会让 memo 的浅比较失效。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

const handleClick = useCallback((id) => {
  removeItem(id)
}, [removeItem])   // 列出用到的依赖

// 等价于 useMemo(() => handleClick, deps)

fn	要缓存的函数（事件处理器、传给子组件的回调等）。
deps	依赖数组：任一项变化时返回新函数，否则返回上次的引用。

返回值：返回缓存的函数引用：依赖不变时，每次渲染拿到的是同一个函数。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

在输入框打字时控制台不再打印「渲染：计数 +1」——onClick 引用稳定，memo 子组件跳过重渲染；点按钮计数照常 +1。

💡 提示 useCallback(fn, deps) 就是 useMemo(() => fn, deps) 的语法糖，本质是缓存引用。

⚠️ 注意 没有配 memo 子组件或不是依赖数组的消费场景时，useCallback 是纯开销。

ℹ️ 说明 依赖漏写会让回调闭包过期数据——与 useEffect 同一套依赖规则；更新 state 优先用函数式更新可减少依赖。

更多案例整理中，敬请期待。

Q 什么时候必须用 useCallback？

A 回调传给 memo 包裹的子组件、或作为 useEffect/useMemo 的依赖时——引用稳定才有意义。

Q useCallback(fn, []) 里读到旧 state 怎么办？

A 改用函数式更新 setCount(c => c + 1) 不依赖外部值；确实需要旧值时就把它列进依赖。

Q 和 useMemo 什么关系？

A useCallback 是 useMemo 的函数特例：一个缓存值，一个缓存函数引用，底层机制相同。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。