React 中即使使用 useCallback 优化事件处理函数，子组件仍可能因父组件重渲染而触发不必要的更新；本文详解原因并提供 React.memo 等关键解决方案。
react 中即使使用 `usecallback` 优化事件处理函数，子组件仍可能因父组件重渲染而触发不必要的更新；本文详解原因并提供 `react.memo` 等关键解决方案。
在 React 开发中，一个常见误区是认为只要对回调函数使用 useCallback，就能完全阻止子组件重渲染。但实际情况是：父组件每次重渲染，都会导致所有子组件（无论 props 是否变化）默认重新执行其函数体或 JSX 返回值。这正是你遇到的问题根源——当点击“Increment Count”按钮时，anotherProp 状态更新，触发 App 组件重渲染；尽管 ChildComponent 的 title 和 handleInputChange props 实际未变（得益于 useCallback），它依然会重新执行并打印 "Child Component renders"。
要真正避免无谓重渲染，需结合 React.memo 对子组件进行浅比较优化：
// ChildComponent.jsx
import { memo } from 'react';
function ChildComponent({ title, handleInputChange }) {
console.log("Child Component renders");
return (
<>
<input type="text" onChange={handleInputChange} />
<h1>{title}</h1>
</>
);
}
export default memo(ChildComponent); // ✅ 关键：包裹 memoReact.memo 会自动对组件的 props 进行浅比较（shallow comparison）。若 title 和 handleInputChange 的引用均未改变（useCallback 确保了后者稳定），则跳过本次渲染，复用上次的 DOM。
⚠️ 注意事项：
-
useCallback的依赖数组必须准确：你原代码中handleInputChange的依赖[pageTitle]是冗余的——该回调内部并未读取pageTitle，仅调用setPageTitle。应改为[]，否则状态更新时会生成新函数，破坏memo的稳定性：const handleInputChange = useCallback( (e) => setPageTitle(e.target.value), [] // ✅ 正确：无外部依赖 );
-
React.memo仅比较 props，不感知 state 或 context 变化；若子组件内部依赖 context，需配合useContext+useMemo或useReducer进一步优化。 - 对于复杂对象 props，浅比较可能失效，此时可传入自定义比较函数：
memo(Component, (prev, next) => isEqual(prev, next))。
总结：useCallback 解决的是「函数引用稳定性」问题，而 React.memo 解决的是「子组件跳过渲染」问题——二者常需协同使用，缺一不可。掌握这一组合，是构建高性能 React 应用的基础实践。
