在 React 中，useCallback 是一个用于 性能优化 的 Hook，其核心作用是通过 缓存函数引用 来避免不必要的重复创建和子组件无效渲染。以下是其核心作用及具体场景分析：
一、核心作用
-
避免重复创建函数
在 React 函数组件中，每次渲染都会重新创建组件内的函数实例。若父组件将内联函数作为 prop 传递给子组件，子组件（尤其是被React.memo包裹的）会因函数引用变化而触发重新渲染。useCallback通过缓存函数实例，仅在依赖项变化时生成新函数，从而减少内存分配和垃圾回收压力 -
保持函数引用稳定性
当函数需要作为依赖项传递给其他 Hook（如useEffect、useMemo）或子组件时，useCallback确保依赖项未变化时函数引用不变，避免因引用变化导致的意外副作用或重复计算 -
优化高阶组件与上下文
在需要将函数传递给高阶组件（HOC）或 Context 时，useCallback可防止因父组件渲染导致子组件不必要的更新，尤其适用于大型应用中的复杂组件树
二、典型使用场景
1. 传递回调给子组件（与 React.memo 配合）
const Parent = () => {
const [count, setCount] = useState(0);
// 仅在 setCount 变化时重新创建函数
const increment = useCallback(() => setCount(c => c + 1), [setCount]);
return <Child onIncrement={increment} />;
};
const Child = React.memo(({ onIncrement }) => {
// 仅当 onIncrement 变化时重新渲染
return <button onClick={onIncrement}>Increment</button>;
});
若不使用 useCallback，每次 Parent 渲染都会生成新的 increment 函数，导致 Child 无效重新渲染
2. 依赖项为函数的 Hook
const fetchData = useCallback(async () => {
const data = await api.fetch();
// 依赖项变化时才更新
}, [api]);
useEffect(() => {
fetchData(); // 依赖项稳定的函数
}, [fetchData]);
避免因 fetchData 引用变化导致 useEffect 重复执行
3. 优化事件处理器
const handleResize = useCallback(() => {
// 处理窗口大小变化
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
防止事件监听器因函数引用变化而重复注册/注销
三、性能权衡与注意事项
-
避免滥用
-
函数创建成本极低，仅在子组件渲染成本高（如大型列表、复杂计算）时使用
-
依赖数组需精确：遗漏依赖会导致闭包陷阱，多余依赖会触发冗余渲染
-
-
与
React.memo的配合
useCallback需与子组件的React.memo结合使用，否则无法阻止子组件渲染 -
替代方案
-
useRef：获取最新值而不触发渲染（如const latestCount = useRef(count).current） -
useReducer：通过派发 action 更新状态，天然稳定引用
-
四、与 useMemo 的区别
| 特性 | useCallback | useMemo |
|---|---|---|
| 缓存内容 | 函数实例 | 计算结果 |
| 典型用途 | 优化回调函数引用稳定性 | 缓存复杂计算结果 |
| 底层实现 | 语法糖：useMemo(() => fn, deps) | 直接缓存计算值 |
| 性能影响 | 函数创建开销 vs 引用比较 | 计算开销 vs 值比较 |
五、总结
useCallback 的核心价值在于 通过函数引用稳定性优化组件渲染性能，尤其适用于以下场景：
- 高频渲染的子组件（如列表项）
- 需要稳定依赖项的 Hook（如
useEffect） - 跨组件传递回调函数（如 Context 或 Redux）
合理使用可显著提升应用性能，但需避免过度优化导致代码复杂度增加
