React中如何避免未变更组件重渲染？useCallback使用未生效问题

核心原因说明 #

• React 默认的重渲染触发规则是：只要父组件的状态更新导致自身重新执行，它渲染输出的所有子组件都会默认跟着重渲染，React 不会主动判断子组件的 props 是否发生了变化。useCallback 仅用于缓存函数的固定引用，本身完全不具备拦截子组件重渲染的能力，这是最普遍的认知误区。
• 当前代码中的 useCallback 存在依赖配置错误：回调函数内部只调用了 React 保证引用永久稳定的 setTextInput 方法，并没有直接读取 textInput 的值，反而把 textInput 放进了依赖数组，会导致每次输入更新 textInput 时，onChangeInput 的引用都重新生成，就算后续做了组件缓存优化也无法生效。

正确修复方案 #

1. 用 React.memo 包裹 Button 组件，开启组件级的重渲染拦截：被 memo 包裹的组件在父组件重渲染时，React 会自动逐次比对当前 props 和上一次的 props 值，如果所有 props 都没有引用变化，就直接跳过重渲染，复用上一次的渲染结果。
2. 修正 useCallback 的依赖配置：因为回调内部没有直接读取 textInput，只需要调用引用稳定的 setTextInput，所以依赖数组留空即可，保证 onChangeInput 的引用从组件挂载到卸载全程不会变化。

修正后的代码示例 #

// 用memo包裹Button开启props比对
const Button = React.memo(() => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
});

export default function App() {
  const [textInput, setTextInput] = useState("Hallo");

  // 空依赖数组，保证回调引用稳定
  const onChangeInput = useCallback(
    (e) => {
      setTextInput(e.target.value);
    },
    []
  );

  return (
    <div>
      <input
        type="text"
        onChange={onChangeInput}
        value={textInput}
      />
      <Button />
    </div>
  );
}

注意：memo 采用浅比对逻辑，如果传入的 props 是对象、数组这类引用类型，依然需要配合 useMemo/useCallback 保证引用稳定，才能完全跳过不必要的重渲染。不需要无差别给所有组件添加 memo，仅针对渲染开销大、props 长期稳定的纯展示组件做缓存优化即可，否则额外的浅比对逻辑反而会带来不必要的性能开销。

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