useCallback到底是什么？
概念与目标
useCallback 是 React 提供的一个钩子函数，用于返回一个“记忆化”的回调函数引用。只有依赖项发生变化时，这个回调函数才会重新创建，否则始终保持同一个引用。此举的核心在于提高跨组件边界的引用稳定性，减少不必要的重新渲染。记忆化的关键点是引用的稳定性，而不仅仅是函数的执行结果。
在实际渲染过程中，每次父组件重新渲染时，默认情况下会重新创建其中定义的事件处理函数。这种引用的变化可能触发子组件的重新渲染，尤其是在子组件使用 React.memo 时更为明显。通过 useCallback，可以让父组件在引用未改变时向子组件传递稳定的函数引用，从而降低无谓的渲染成本。这是前提条件，而不是万能解决方案。
基本用法示例
下面的示例展示了一个最简场景：父组件向子组件传入一个事件处理函数。若不使用 useCallback，handleClick 的引用会在每次渲染时改变，导致子组件的判断条件可能被触发。
import React, { useState, useCallback } from 'react';function Child({ onClick }) {console.log('Child render');return ;
}export default function App() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(c => c + 1);}, []); // 依赖为空数组，函数引用在组件生命周期内稳定return (Count: {count}
);
}函数记忆化原理详解
原理要点
记忆化的核心机制是把创建好的函数引用缓存起来，只有依赖项变化时才重新创建新的函数引用。这种缓存机制使得函数的引用在同一轮渲染中保持稳定，从而帮助子组件的 memo 优化策略发挥作用。useCallback 返回的是函数本身的引用，并不是对函数执行结果的缓存。
需要注意的是，useCallback 与 useMemo 的关系：useCallback 返回一个记忆化的回调函数，useMemo 返回一个记忆化的计算结果。二者经常搭配使用，但职责不同，使用时要避免混淆。
依赖项与闭包
返回的函数会“捕获”在创建时刻的执行环境，形成闭包。当组件重新渲染且依赖项未发生变化时，useCallback 会返回同一个函数对象；如果依赖项变化，函数会重新创建。正确处理依赖项是避免出错的关键，否则可能出现闭包中变量的“老值”问题。
如果忘记把某些会被函数使用的变量加入依赖项，可能导致函数内部使用的值与外部最新值不同步，从而产生难以追踪的 bug。此时需要审视依赖数组并进行调整。
import React, { useCallback, useState, useEffect } from 'react';function App() {const [text, setText] = useState('');const log = useCallback(() => {console.log(text);}, [text]); // 依赖 text，text 变化时 log 会更新useEffect(() => {const id = setInterval(log, 1000);return () => clearInterval(id);}, [log]);return ;
}性能优化要点
使用场景的边界条件
不要盲目地追求稳定引用。只有在函数引用的稳定性确实能够显著降低子组件重渲染或副作用触发时，才值得使用 useCallback。对于简单组件或低频更新的场景，使用 useCallback 反而会带来额外的内存和时间开销。
在没有明显渲染瓶颈的情况下，过度优化会降低代码可读性和维护性。因此，应以实际性能指标和分析为依据来决定是否引入 useCallback。
如何与其他优化手段配合
要达到更好的性能效果，可以将 useCallback 与 React.memo、useMemo、以及 useRef 配合使用。缓存函数引用只是优化链的一环，真正的提升往往来自整体的渲染成本管理、避免不必要的副作用與避免父子之间的无意义传递。
例如，在将高阶组件或含有复杂子树的场景中，稳定的函数引用有助于子组件的 memo 判断正确通过，从而减少子树的重复渲染。
import React, { memo, useCallback, useState } from 'react';const Child = memo(function Child({ onAction }) {console.log('Child render');return ;
});export default function Parent() {const [n, setN] = useState(0);const onAction = useCallback(() => {setN(x => x + 1);}, []);return (常见误区与排错思路
误区1：useCallback 可以“永远”保持函数引用不变。现实情况是只有依赖项不变时才会稳定，依赖项变化时才会重新创建。
误区2：useCallback 能缓存昂贵的计算结果。实际上它只缓存函数引用；若要缓存计算结果，应使用 useMemo。
// 误区示例（不要这样做）
// 使用 useCallback 缓存一个会产生副作用的函数
const heavy = useCallback(() => {// 这里假设是昂贵计算return heavyComputation();
}, [dependencies]);