useCallback如何提升代码运行速度？解析其缓存的实际作用

你观察得没错：每次组件重渲染时，传给useCallback的函数字面量确实会被创建——这就是你测试中控制台每次都打印日志的原因。但useCallback的核心价值从来不是“避免函数被创建”，而是缓存函数的引用地址，以此解决两类关键的性能问题：

1. 避免子组件不必要的重渲染 #

如果你的组件把这个函数作为props传递给子组件，且子组件用React.memo做了浅比较优化：

• 不用useCallback时，父组件每一次重渲染都会生成一个新的函数引用，子组件会因为props变化（函数引用变了）而触发重渲染，哪怕这个函数的逻辑完全没变。
• 用了useCallback后，只要依赖数组（第二个参数）里的内容不变，useCallback就会返回之前缓存的函数引用，子组件的props不会变化，也就不会触发不必要的重渲染，这才是真正能感知到的性能提升场景。

比如对比两种写法的实际影响：

// 父组件未使用useCallback
const Parent = () => {
  const [msg, setMsg] = useState('');
  const handleChange = (ev) => setMsg(ev.target.value);
  
  return <Child onChange={handleChange} />;
};

// 子组件用React.memo优化
const Child = React.memo(({ onChange }) => {
  console.log('Child 重渲染了');
  return <input onChange={onChange} />;
});

此时父组件每次输入，Child都会打印日志；而如果把handleChange改成useCallback包裹的版本：

const handleChange = useCallback((ev) => {
  setMsg(ev.target.value);
}, []);

只要依赖数组为空，Child就只会在首次渲染时打印一次日志，后续输入不会触发重渲染。

2. 稳定hooks的依赖项 #

当你把这个函数作为useEffect、useMemo等hooks的依赖项时：

• 不用useCallback的话，每次渲染函数引用都会变化，会导致依赖项“假变化”，触发hooks重复执行（比如useEffect里的副作用逻辑多次运行）。
• 用useCallback缓存引用后，只要依赖数组不变，函数引用就稳定，hooks只会在真正需要的时候执行。

比如：

// 未使用useCallback时，每次渲染都会重新执行useEffect
useEffect(() => {
  someApiCall(handleChange);
}, [handleChange]);

// 使用useCallback后，只有依赖数组变化时才会重新执行useEffect
const handleChange = useCallback((ev) => setMsg(ev.target.value), []);
useEffect(() => {
  someApiCall(handleChange);
}, [handleChange]);

误区纠正 #

useCallback并不会减少函数创建本身的性能开销（这个开销在现代浏览器里微乎其微），它的作用是解决因引用变化引发的连锁性能浪费——只有当你的函数会作为props传给优化后的子组件，或者作为其他hooks的依赖项时，使用useCallback才有实际的性能优化意义。

内容的提问来源于stack exchange，提问作者Stefanie Gauss