React 性能优化利器：深入理解 useMemo 与 useCallback

React 性能优化利器：深入理解 `useMemo` 与 `useCallback`

在 React 应用开发中，随着组件复杂度的提升，性能问题逐渐显现。即使状态更新只影响局部 UI，整个组件函数也会重新执行，导致不必要的计算或子组件重渲染。为解决这些问题，React 提供了两个关键的性能优化 Hook：useMemo 和 useCallback。它们虽小，却能在关键时刻显著提升应用性能与用户体验。

本文将结合具体代码示例，深入剖析这两个 Hook 的原理、使用场景及最佳实践。

一、为什么需要性能优化？

React 的核心理念是"状态驱动视图"。当组件的状态（state）或属性（props）发生变化时，组件函数会重新执行，生成新的 JSX。这种机制简洁高效，但也带来潜在性能隐患：

昂贵的计算重复执行：如过滤大量数据、复杂数学运算等。
子组件无谓重渲染：即使 props 未变，父组件更新仍会触发子组件重新渲染。

若不加以控制，这些冗余操作会拖慢应用响应速度，尤其在低端设备或大型列表场景下更为明显。

二、`useMemo`：缓存计算结果

1. 问题场景

假设我们有一个水果列表，并根据用户输入的关键词进行过滤：

ini 复制代码

const list = ['apple', 'orange', 'peach'];
const [keyword, setKeyword] = useState('');
const filterList = list.filter(item => item.includes(keyword));

表面看没问题，但若组件中还有另一个无关状态（如 count）：

scss 复制代码

const [count, setCount] = useState(0);

当点击"+1"按钮更新 count 时，整个 App 组件重新运行，filterList 也会被重新计算------尽管 keyword 并未改变！这不仅浪费 CPU 资源，还可能引发视觉闪烁等问题。

2. `useMemo` 的解决方案

useMemo 允许我们将计算过程缓存起来，仅在依赖项变化时才重新计算：

ini 复制代码

const filterList = useMemo(() => {
  console.log('filter 执行了');
  return list.filter(item => item.includes(keyword));
}, [keyword]); // 仅当 keyword 变化时重新计算

✅ 关键点：第二个参数是依赖数组。只有数组中的值发生变化，才会触发重新计算。

3. 处理昂贵计算

对于更复杂的场景，比如计算大数累加：

ini 复制代码

function slowSum(n) {
  let sum = 0;
  for (let i = 0; i < n * 1000000; i++) {
    sum += i;
  }
  return sum;
}

若直接调用 slowSum(num)，每次组件更新都会卡顿。使用 useMemo 可有效避免：

scss 复制代码

const result = useMemo(() => slowSum(num), [num]);

这样，只有 num 改变时才会执行耗时运算，极大提升流畅度。

4. 注意事项

不要滥用 ：简单计算（如 a + b）无需 useMemo，反而增加内存开销。
依赖项必须完整：遗漏依赖会导致使用过期值。
includes("") 返回 true ：空字符串匹配所有项，需额外处理边界情况（如 keyword.trim()）。

三、`useCallback`：缓存函数引用

1. 子组件重渲染问题

考虑以下父子组件结构：

javascript 复制代码

// 父组件
const [count, setCount] = useState(0);
const [num, setNum] = useState(0);

const handleClick = () => {
  console.log('click');
};

return (
  <>
    <button onClick={() => setCount(count + 1)}>count +1</button>
    <Child count={count} handleClick={handleClick} />
  </>
);

每次父组件更新（如修改 num），handleClick 都会重新创建一个新函数 。即使 count 没变，Child 组件因接收到新的 handleClick 引用，也会被强制重渲染。

2. `memo` + `useCallback` 的组合拳

步骤一：用 `memo` 包裹子组件

memo 是一个高阶组件（HOC），它会对 props 进行浅比较。若 props 未变，则跳过渲染：

javascript 复制代码

const Child = memo(({ count, handleClick }) => {
  console.log('Child 重新渲染');
  return <div onClick={handleClick}>子组件 {count}</div>;
});

步骤二：用 `useCallback` 缓存回调函数

ini 复制代码

const handleClick = useCallback(() => {
  console.log('click');
}, []); // 无依赖，函数引用永久不变

现在，只有当 count 改变时，Child 才会更新；修改 num 不再触发子组件重渲染。

3. 依赖项的正确使用

若回调函数依赖某个状态，必须将其加入依赖数组：

ini 复制代码

const handleClick = useCallback(() => {
  console.log('当前 count:', count);
}, [count]); // 依赖 count

否则，函数内部会捕获旧的 count 值（闭包陷阱）。

💡 设计哲学 ：React 的数据流是"父管状态，子管展示"。通过 memo + useCallback，我们确保子组件仅在必要时更新，符合单一职责原则。

四、`useMemo` vs `useCallback`：本质区别

虽然两者都用于缓存，但用途不同：

Hook	用途	返回值
`useMemo`	缓存计算结果	值（如数组、对象、数字）
`useCallback`	缓存函数引用	函数

实际上，useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。但语义上，useCallback 更清晰表达"这是一个回调函数"。

五、何时使用？何时避免？

避免滥用：

简单组件无需优化；
过度使用会增加内存占用和代码复杂度；
先用性能分析工具（如 React DevTools Profiler）定位瓶颈，再针对性优化。

六、总结

useMemo 和 useCallback 是 React 性能优化的重要工具，它们通过缓存机制减少不必要的计算与渲染：

useMemo 解决"重复计算"问题，适用于派生数据；
useCallback 解决"函数引用变化"问题，常与 memo 配合使用，防止子组件无谓更新。

掌握它们的关键在于理解 "依赖项" 的作用：只有依赖变化时，才重新计算或生成新函数。合理使用这两个 Hook，不仅能提升应用性能，还能写出更清晰、可维护的代码。

记住：优化不是目的，而是手段。在保证功能正确的前提下，针对真实性能瓶颈进行精准优化，才是工程化的最佳实践。

React 性能优化利器：深入理解 useMemo 与 useCallback