话说回来，

主要定义

useCallback 是 React 提供的性能调整钩子它通过缓存函数引用来避免在组件重渲染时重复创建相同逻辑的函数。其实，

为什么需要 useCallback？

在 React 中。每一次组件重新渲染都会重新创建内部定义的函数，导致引用地址变更。如果该函数被传递给子组件作为 props，即使子组件使用了 React.memo子组件仍会因为 props 引用变化而无意义地重渲染。

痛点：你可能已经遇到过 “子组件总是重新渲染” 的困扰，而单靠 memo 并不能解决这个问题。

示例

// 父组件
const Parent = => {
const = useState;// 每次 Parent 重渲染，handleClick 都会被重新创建
const handleClick = => {
console.log;}，return (

 setCount}>计数{count}
{/* 即使 Child 用 memo，handleClick 引用变了Child 仍会重渲染 */}


);}，// 子组件
const Child = memo => {
console.log;话说回来，return 子组件按钮;})，

基本用法

const memoizedFn = useCallback(
=> {
// 函数逻辑
doSomething;},// 依赖数组：只有依赖项变化时才重新创建函数
);

• 第一个参数：需要缓存的回调函数。
• 第二个参数：依赖数组。不过，
  • 依赖项不变 → 返回之前缓存的函数引用。
  • 依赖项变化 → 创建新函数并更新缓存。

修复上面的示例

痛点：You might have noticed that even after wrapping Child in Memos,it still re-renders because callback reference changes.

const Parent = => {
const = useState;// 缓存函数：依赖数组为空，仅在首次渲染时创建一次
const handleClick = useCallback => {
console.log;},)，// 无依赖 → 永久缓存
return (

 setCount}>计数{count}
{/* Child 不再无意义地重渲染 */}


);}，const Child = memo => {
console.log;return 子组件按钮;})，

主要原理解析

痛点：You might wonder how React knows wher to reuse or recreate function.

function useCallback {
// 从缓存中取出上一次存储的函数和对应依赖
const = getFromCache;// 对比当前 deps 与缓存中的 deps 是否相等
if ) {
// deps 改变 → 缓存新的函数与新的 deps 并返回新函数
cacheSet;return callback;}
// deps 未改变 → 返回旧的 cachedFn
return cachedFn;}

• React 对依赖数组做浅比较；话说回来，若是对象/数组，即使内容未变但引用不同。也会认为已改变，从而重新创建回调。
• The cache lives across renders and is shared by all hooks in same component.
• This lightweight mechanism ensures minimal overhead compared to recreating functions each render.

什么时候不需要用 useCallback？

• 仅当回调作为 `props`传递给子组件且该子组件使用 `memo` 时需要考虑缓存；否则无需额外开销，
• 仅当回调是 `useEffect`/`useMemo` 的依赖项时需要保证其稳定性； 否则将导致 effect 或计算频繁触发。老实说，
• 如果回调只在当前组件内部使用、且不是性能瓶颈。用 `useCallback` 会增加不必要的开销。
，
• = 无需包装
• = 避免频繁副作用
• = 防止无意义性能损耗
I apologize for formatting issues due to copy-paste errors in previous attempts. Below is a clean version: +tsx // Example of dependency array mistake: const = useState;// Bad – missing count in dependencies – will always log initial value const badFn = useCallback => { console.log;// 永远打印0，因为 deps 为 },);按理说，// Good – include all dependencies so it captures latest count value. const goodFn = useCallback => { console.log;// 能拿到最新 count 值 },);**关键注意事项**
• 全部写完所有在回调内部使用且会随时间变化的数据都必须放进 deps。
• 空数组代表着该回调只想在首次挂载时创建一次——适合纯粹读取初始值或外部不可变资源。
• 对象/数组引用即便内容没改。也要确保引用保持稳定，否则会误触发。

用 useMemo 与 useCallback 的区别

Hook	用途	等价表达
useCallback	缓存 函数引用	useMemo => fn,deps)
useMemo	缓存 计算结果	-

---

常见适用场景

1. props 给 Memo 化子组件防止因回调引用变化导致的不必要重绘。话说回来，
2. 副作用 hook 的依赖避免 effect 在每次 render 时被误触发。
3. 高成本回调如复杂业务逻辑或大对象构造，只在真正必要时才执行。
4. 整体性能调整组合配合 。, 等一起使用。

---

小结

• 当你看到“子组件不断刷新”或“effect 每次都跑”这类报错信息时先检查是否把相关回调包裹进了 useCallback 而且正确声明了所有 dependencies。
• 如果没有真正传递给外部或作为 hook 的 dependency，就不要勉强加上——反而会带来额外内存使用和 CPU 开销。
• 浅比较机制。对象/数组需保持同一实例，否则即使数据没改也会误判。

祝你在 React 项目中顺利运用 useCallback 实现高效、可维护代码！