useMemo & useCallback ：React 函数组件中的性能优化利器

在日常开发中，我们经常会遇到组件频繁刷新或计算逻辑重复执行的问题，特别是在处理复杂应用时，这种现象会显著拖慢页面性能。

于是，React 提供了 useMemo 和 useCallback 两个 Hook，它们通过巧妙的缓存机制，帮助我们减少不必要的重复工作。

本文我将从这两个工具的原理、使用场景到具体实践，带你一步步理解它们。

---

一、useMemo 的定义与核心作用

1.1 定义

useMemo 是 React 提供的一个 Hook，它的核心功能是缓存复杂计算的结果。

比如，当我们需要执行一个耗时的计算任务时，如果每次组件刷新都重新执行一遍，不仅浪费资源，还可能导致用户体验变差，useMemo 就像一个"记忆本"，它会记住上一次的计算结果，只有当依赖项发生变化时，才会重新计算，从而避免重复劳动。

1.2 核心特性

• 惰性求值：这个特性意味着我们不需要每次都立即执行计算，而是等到真正需要结果时才触发，比如，你只需要在依赖项变化时才重新生成数据，其他时候则不修改。

• 缓存机制 ：useMemo 会把上一次的计算结果保存下来，下次遇到相同的依赖项时，直接返回缓存值，而不是重新执行函数。这种机制类似于浏览器的缓存策略，能显著减少 CPU 占用。

• 适用于纯函数 ：为了确保缓存结果的可靠性，useMemo 的计算函数必须是纯函数（即输入相同，输出一定相同）。如果函数内部依赖了外部变量或副作用，缓存可能会失效。

1.3 使用场景

• 高开销的计算：比如数据过滤、格式化、数学运算等，这些操作如果每次渲染都执行，会明显拖慢性能。

• 避免重复渲染中的重复计算：当某个值仅依赖于特定状态时，缓存可以避免每次刷新都重新计算。

• 优化子组件 props：如果计算结果作为 props 传递给子组件，缓存可以防止父组件频繁更新导致的子组件重新渲染。

下面，我将会通过一些典型的案例来对useMemo进行讲解。

---

二、useMemo 详解

代码案例：

import { useState, useMemo } from 'react';

function App() {
  const [n, setN] = useState(10);

  // 使用 useMemo 缓存斐波那契数列计算结果
  const fibSequence = useMemo(() => {
    console.log('Computing Fibonacci...');
    const result = [];
    for (let i = 0; i < n; i++) {
      if (i <= 1) result.push(i);
      else result.push(result[i - 1] + result[i - 2]);
    }
    return result;
  }, [n]);

  return (
    <div>
      <p>斐波那契数列前{n}项：</p>
      <ul>{fibSequence.map((num, index) => <li key={index}>{num}</li>)}</ul>
      <button onClick={() => setN(n + 1)}>增加项数</button>
    </div>
  );
}

上面的代码，我们通过 useMemo 实现了斐波那契数列的动态计算与渲染，同时避免了不必要的重复计算。

具体来说，当用户修改 n 时，只有当前 n 值对应的数列会被重新计算，而其他状态更新时（例如组件首次加载或按钮点击但 n 未变化），数列计算逻辑会被跳过。

详细分析：

1. useState 定义状态 n

   用户输入的 n 控制斐波那契数列的项数。这里用 useState(10) 初始化为默认值 10。

2. useMemo 缓存计算逻辑

   • 函数式参数 ：useMemo 接收一个函数作为第一个参数，这个函数负责执行复杂的计算逻辑。在本例中，函数通过循环生成斐波那契数列。

   • 依赖数组 [n] ：第二个参数是依赖数组，只有当 n 发生变化时，useMemo 才会重新执行函数并更新缓存结果。如果 n 未变化，useMemo 直接返回上一次的缓存值。

   • console.log 验证效果 ：通过打印日志，我们可以观察到 Computing Fibonacci... 只在 n 变化时触发，其他时候被跳过。

3. 渲染结果

   • 使用 map 方法将缓存后的数列渲染为列表项。由于 useMemo 确保了 fibSequence 的稳定性，即使父组件频繁刷新，只要 n 不变，列表内容也不会重复计算。

   • 其他逻辑 ：按钮点击事件直接更新 n，而不会干扰数列的缓存逻辑，体现了 useMemo 对依赖项的精准控制。

提示：

• useMemo 的计算函数必须是纯函数（即输入相同，输出一致），如果函数内部依赖了外部变量或副作用，缓存结果可能不准确。

• 如果计算逻辑本身非常简单（例如 n * 2），直接执行可能比引入 useMemo 更高效。

useMemo使用前后对比

场景	未使用 useMemo	使用 useMemo
计算触发频率	每次渲染都执行计算	仅在 n 变化时重新计算
性能影响	高频计算导致 CPU 开销大	通过缓存减少冗余计算
子组件更新控制	无法控制子组件更新	与 React.memo 配合使用可优化子组件更新

---

三、useCallback 的定义与核心作用

3.1 定义

useCallback 是 React 提供的另一个 Hook，它的核心目标是缓存函数引用。

在开发中，我们常常会为组件定义回调函数，但如果每次渲染都生成新的函数实例，即使逻辑没变，子组件也可能因此重新渲染,useCallback 能帮我们"记住"函数的引用地址，只有在依赖项变化时才重新生成函数。

3.2 核心特性

• 稳定引用：通过缓存函数的引用地址，确保在依赖项不变时，函数引用保持不变。这就像给函数贴上了"标签"，只要依赖项不变，标签就不会更换。

• 惰性生成：只有当依赖项变化时，才会重新生成函数。这种机制避免了无意义的重复创建。

• 适用于回调函数：特别适合传递给子组件的事件处理函数或逻辑函数，避免因引用变化导致的子组件重新渲染。

3.3 使用场景

• 子组件依赖回调函数：如果父组件频繁更新，子组件可能因回调函数引用变化而重新渲染。

• 优化 useEffect 或 useMemo 的依赖项：如果依赖项是函数，频繁的函数重新生成可能导致副作用或计算逻辑失效。

---

四、useCallback 详解

代码案例：

import { useState, useCallback, memo } from 'react';

// 子组件 Button，通过 React.memo 防止不必要的重新渲染
const Button = memo(({ onClick, label }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{label}</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  // 使用 useCallback 缓存回调函数
  const handleClick = useCallback(() => {
    console.log('handleClick');
    setNum(num + 1);
  }, [num]);

  return (
    <div>
      <div>Count: {count}</div>
      <div>Num: {num}</div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <Button onClick={handleClick} label="Increase Num" />
    </div>
  );
}

这段代码，我们通过 useCallback 和 React.memo 技术实现了父子组件间回调函数的稳定传递，同时避免了子组件因父组件无关状态更新而重复渲染。

当 count 状态变化时，子组件 Button 不会重新渲染，而只有当 num 状态变化时，回调函数 handleClick 才会重新生成并触发子组件更新。

详细分析：

1. memo 包裹子组件

   • 这里通过使用 React.memo 包裹 Button 组件，确保其只有在 onClick 或 label 的引用地址变化时才重新渲染。这也是优化的核心前提------子组件本身具备"记忆能力"。

2. useCallback 缓存回调函数

   • 函数式参数 ：useCallback 接收一个函数作为第一个参数，这里定义的是点击事件的逻辑 setNum(num + 1)。

   • 依赖数组 [num] ：第二个参数是依赖数组，只有当 num 发生变化时，useCallback 才会重新生成新的函数实例，如果 num 未变化，返回的是缓存的函数引用。

   • console.log 验证效果 ：通过打印日志，可以观察到 handleClick 只有在 num 变化时才会执行，而 count 变化时不会影响函数引用。

3. 父组件状态更新

   • count 状态变化 ：点击"Increase Count"按钮时，count 更新，但 handleClick 的引用地址未变化，因此 Button 组件不会重新渲染。

   • num 状态变化 ：点击"Increase Num"按钮时，num 更新，handleClick 会被重新生成，导致 Button 组件重新渲染。

提示：

• useCallback 的依赖数组必须包含所有函数内部用到的变量（如本例中的 num），如果遗漏，可能导致函数引用失效或缓存不准确。

• useCallback 本身不会阻止子组件渲染，但它通过稳定回调函数引用，配合 React.memo 才能真正减少子组件的更新次数。

• 如果回调函数逻辑非常简单（例如直接调用 setNum），直接内联写法可能比引入 useCallback 更简洁高效。

使用前后对比

场景	未使用 useCallback	使用 useCallback
回调函数引用变化	每次渲染都生成新函数	仅在 num 变化时生成新函数
子组件更新控制	子组件可能因引用变化频繁更新	通过缓存减少子组件不必要的更新
与 React.memo 协同	无法有效控制子组件更新	与 React.memo 配合使用可优化渲染性能

---

五、useMemo 与 useCallback 的对比

特性	useMemo	useCallback
作用	缓存复杂计算的结果	缓存函数引用
返回值	返回计算结果	返回函数
使用场景	优化计算逻辑、减少冗余计算	优化回调函数引用，避免子组件不必要的更新
依赖项管理	依赖项变化时重新计算	依赖项变化时重新生成函数
与子组件配合	与 React.memo 配合优化 props	与 React.memo 配合优化回调函数引用

---

六、实践建议

1. 合理选择 Hook

   • 优先使用 useMemo：当需要缓存复杂计算的结果时。
   • 优先使用 useCallback：当需要稳定回调函数引用时。

2. 避免过度使用

   • 轻量级操作无需缓存：例如简单的数学运算或字符串拼接。
   • 依赖项需准确管理：遗漏依赖项可能导致缓存结果不正确，而过度依赖则失去优化效果。

3. 与 React.memo 协同优化

   • 通过 useMemo 和 useCallback 稳定 props 和回调函数引用，再结合 React.memo 防止子组件不必要的重新渲染。

4. 组件拆分与状态隔离

   • 将组件拆分为更小的独立单元，减少每个组件的状态依赖，从而降低性能优化的复杂性。

5. 性能监控与调试

   • 使用 console.log 或 React DevTools 的性能分析工具，验证缓存是否生效，确保优化效果符合预期。