在 react 中，仅用 usecallback 包裹回调函数并不能阻止子组件重渲染；必须配合 react.memo 对子组件进行浅比较优化，才能真正避免不必要的渲染。二者缺一不可：usecallback 保证函数引用稳定，react.memo 则负责跳过未变更 props 的渲染。
在 react 中，仅用 usecallback 包裹回调函数并不能阻止子组件重渲染；必须配合 react.memo 对子组件进行浅比较优化，才能真正避免不必要的渲染。二者缺一不可：usecallback 保证函数引用稳定，react.memo 则负责跳过未变更 props 的渲染。
React 的默认渲染机制是自上而下、递归触发的：只要父组件重新渲染（例如因 useState 或 useEffect 触发），其所有子组件无论 props 是否实际变化，都会执行一次新的 render 函数调用。这是 React 渲染流程的基础设计，并非性能缺陷，而是确保 UI 一致性的默认保障。
因此，useCallback 的核心作用是保持函数引用的稳定性——它确保每次父组件渲染时，返回的是同一个函数实例（前提是依赖项未变）。但这仅解决了“props 值是否相同”的前置条件，并不影响子组件自身的渲染决策逻辑。若子组件未做任何优化（如未使用 React.memo），它仍会无条件执行渲染。
而 React.memo 是子组件的“守门员”：它会对本次渲染的 props 与上一次渲染的 props 进行浅比较（shallow equality）。只有当所有 prop（包括函数 prop）的引用均未变化时，memo 才会跳过本次渲染，直接复用上次的 DOM。这正是你观察到“加了 useCallback 仍重渲染，加上 memo 后才生效”的根本原因。
✅ 正确实践示例（修正关键点）：
// ✅ 父组件：useCallback + 稳定依赖
const OnBlurHandler = useCallback(
(e: React.FocusEvent<HTMLInputElement>) => {
if (e.target.name === "a") setA(parseInt(e.target.value) || 0);
else setB(parseInt(e.target.value) || 0);
},
[setA, setB] // ❌ 错误依赖：[a, b] 会导致函数频繁重建；✅ 正确依赖应为 setA/setB（它们从不变化）
);
// ✅ 子组件：必须包裹 memo，且 props 类型需可安全浅比较
const Input = memo(({ name, placeholder, OnBlurHandler }: {
name: string;
placeholder: string;
OnBlurHandler: (e: React.FocusEvent<HTMLInputElement>) => void;
}) => {
console.log("Input rendered"); // 仅当 props 实际变化时打印
return (
<input
name={name}
placeholder={placeholder}
onBlur={OnBlurHandler}
/>
);
});⚠️ 注意事项：
-
useCallback的依赖数组必须精准：避免包含易变值（如a/b），否则函数引用仍会变化，memo浅比较失败； -
React.memo仅对 props 做浅比较，若传入对象/数组等引用类型且未做 memoization（如用useMemo包裹），仍会触发重渲染； - 不要过度优化：优先通过 React DevTools 的 “Highlight Updates” 功能定位真实性能瓶颈，而非盲目添加
useCallback/memo； - 函数组件本身无实例概念，
memo的“记忆”本质是缓存上一次的 props 和输出的 React Element，对比后决定是否复用。
总结来说，useCallback 解决的是 “传给子组件的函数会不会变”，而 React.memo 解决的是 “子组件要不要渲染” —— 二者是协作关系，而非替代关系。理解这一分工，是掌握 React 性能优化的关键起点。
