4.什么时候使用 useCallback 和 useMemo？如果滥用它们会带来什么后果？

用户8691

2025年9月20日修改

深入理解 React Hooks：何时使用 useMemo 与 useCallback？

在 React 开发中，我们经常听到关于性能优化的建议，而 useMemo 和 useCallback 正是其中最常被提及的两个 Hooks。它们的目标很明确：**通过缓存（memoization）来避免不必要的计算和渲染**。​

然而，“何时使用”以及“是否应该使用”却是一个值得深入探讨的话un。过早或不当的优化，不仅无法带来收益，反而会增加代码的复杂度和维护成本。​

一切的起点：React 的重渲染机制

要理解这两个 Hooks 的价值，我们首先需要回顾 React 的一个核心行为：**当一个组件的 state 或 props 发生变化时，它会触发自身以及其所有子组件的重渲染（re-render）**。​

在重渲染过程中，组件函数内部的所有代码都会被重新执行。这意味着：​

1.
函数内部的变量（包括对象和函数）会被重新创建。​

2.
即使这些变量的内容“看起来”没变，但它们在内存中的引用地址却是全新的。​
​

我们来看一个简单的例子：

代码块

function ParentComponent() {​
  const [count, setCount] = useState(0);​
​
  // 每次 ParentComponent 重渲染，这个对象都会被重新创建​
  const config = { theme: 'dark' };​
  ​
  // 这个函数也会被重新创建​
  const handleClick = () => {​
    console.log("Button clicked");​
  };​
​
  return (​
    <div>​
      <button onClick={() => setCount(c => c + 1)}>​
        Increment: {count}​
      </button>​
      <ChildComponent config={config} onClick={handleClick} />​
    </div>​
  );​
}​
​
// 使用 React.memo 包装，仅在 props 变化时才重渲染​
const ChildComponent = React.memo(function Child({ config, onClick }) {​
  console.log("ChildComponent is rendering...");​
  return <button onClick={onClick}>Child Button</button>;​
});​

在这个例子中，即使我们用 React.memo 优化了 ChildComponent，但每次点击父组件的 Increment 按钮时，你仍然会在控制台看到 "ChildComponent is rendering..."。​

原因在于，父组件每次重渲染，都会生成全新的 config 对象和 handleClick 函数。对于 ChildComponent 而言，它接收到的 props 引用地址每次都不同，React.memo 的浅比较判断它们“发生了变化”，从而导致了不必要的重渲染。​

这就是 useMemo 和 useCallback 需要解决的核心问题之一：**保持引用的稳定性**。​

4.什么时候使用 useCallback 和 useMemo？如果滥用它们会带来什么后果？​

4.什么时候使用 useCallback 和 useMemo？如果滥用它们会带来什么后果？