useCallback 是 React 提供的一个 Hook，用于在函数组件中缓存（记忆化）回调函数，避免每次渲染都创建新的函数引用，从而优化性能，尤其是在将函数作为 props 传递给子组件时非常有用。
基本用法
import React, { useCallback } from 'react';
function MyComponent({ value, onChange }) {
const handleClick = useCallback(() => {
onChange(value + 1);
}, [value, onChange]);
return <button onClick={handleClick}>增加</button>;
}
- 第一个参数：你想要缓存的函数。
- 第二个参数：依赖项数组，只有当这些依赖发生变化时，函数才会被重新创建。
工作原理
- 每次组件渲染时，useCallback 会检查依赖项数组。
- 如果依赖项没有变化，useCallback 返回上一次缓存的函数引用。
- 如果依赖项发生变化，useCallback 会生成一个新的函数引用。
适用场景
- 将回调函数作为 props 传递给子组件：如果子组件使用了 React.memo 或 PureComponent，只有当 props 发生变化时才会重新渲染。使用 useCallback 可以保证函数引用不变，避免子组件不必要的重新渲染。
- 依赖于特定状态或属性的回调：只有这些依赖发生变化时才需要重新创建函数。
与 useMemo 的区别
| Hook | 作用 | 返回内容 |
|---|---|---|
| useCallback | 缓存函数引用，避免函数重复创建 | 记忆化的函数 |
| useMemo | 缓存计算结果，避免重复计算 | 记忆化的值 |
- useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
注意事项
- 不要过度使用 useCallback。只有在函数频繁作为 props 传递给子组件，或依赖于性能优化时才需要使用，否则会增加代码复杂度。
- 依赖项数组要准确，确保所有用到的外部变量都被正确列入依赖，否则可能导致逻辑错误。
总结
useCallback 的核心作用是缓存回调函数，保证函数引用的一致性，避免不必要的子组件重新渲染，从而提升 React 应用的性能。
