如何在 React 中使用useMemo Hook 优化复杂计算逻辑的性能，避免重复计算？

前端布洛芬

于 2025-05-23 22:55:35 发布

阅读量913

点赞数 14

分类专栏：大白话前端八股文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_37212162/article/details/148177500

版权

大白话前端八股专栏收录该内容

435 篇文章

订阅专栏

大白话如何在 React 中使用useMemo Hook 优化复杂计算逻辑的性能，避免重复计算？

前端小伙伴们，有没有遇到过这种情况？写了个表格排序功能，明明只改了个输入框的内容，排序逻辑却疯狂执行，页面卡成PPT？今天咱们就聊聊React的"计算缓存小助手"——useMemo，手把手教你用它优化复杂计算，让页面丝滑到飞～

一、复杂计算的"重复之痛"

先讲个我上周踩的坑：给客户做数据看板，有个功能是把1000条数据按"销售额"排序，再计算TOP10的平均值。结果发现，随便改个输入框的内容（比如筛选时间），排序和计算逻辑就重新跑一遍，页面卡得用户直骂街。

打开React DevTools一看，好家伙！组件每次渲染都触发了排序函数，哪怕数据根本没变化。这就是典型的"重复计算"问题——组件因无关状态更新重新渲染时，复杂计算被无意义地重复执行，浪费性能还影响体验。

二、useMemo的"缓存魔法"

要解决重复计算，得先明白React的渲染机制：组件状态/Props变化→触发重新渲染→执行所有函数（包括计算逻辑）。如果计算逻辑耗时且结果不变，重复执行就是纯浪费。

1. useMemo的核心作用：缓存计算结果

useMemo是React提供的Hook，它的作用是缓存某个计算结果，只有当依赖的变量变化时，才重新计算。官方文档说它是：

“Returns a memoized value. Use memoization to optimize performance by avoiding expensive recalculations.”
（返回一个记忆化的值。通过避免昂贵的重新计算来优化性能。）

2. 3个关键参数：

factory：计算函数（要缓存的复杂逻辑）；
deps：依赖数组（数组中的变量变化时，重新计算）；
返回值：上一次缓存的结果（依赖未变时）或新计算的结果（依赖变化时）。

3. 工作流程：

首次渲染：执行factory，缓存结果；
后续渲染：检查deps是否变化；
若未变：直接返回缓存结果；
若变化：重新执行factory，更新缓存。

三、代码示例：从"卡成PPT"到"丝滑如德芙"

示例1：未优化的复杂计算（踩坑现场）

先看未优化的代码——每次渲染都执行排序和计算，哪怕数据没变化：

// 模拟从API获取的1000条数据（实际可能来自props或state）
const mockData = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  销售额: Math.random() * 10000 // 随机生成销售额
}));

function DataBoard() {
  const [searchText, setSearchText] = React.useState(''); // 搜索框状态

  // 复杂计算：排序+计算TOP10平均值（未优化）
  const sortedData = mockData.sort((a, b) => b.销售额 - a.销售额); // 降序排序
  const top10Average = sortedData.slice(0, 10).reduce((sum, item) => sum + item.销售额, 0) / 10;

  return (
    <div>
      <input 
        type="text" 
        value={searchText} 
        onChange={(e) => setSearchText(e.target.value)} 
        placeholder="搜索..." 
      />
      <p>TOP10平均销售额：{top10Average.toFixed(2)}</p>
      {/* 其他UI... */}
    </div>
  );
}

问题：当searchText变化时，组件重新渲染，sortedData和top10Average会被重新计算——即使mockData根本没变化！

示例2：用useMemo优化（丝滑版）

用useMemo缓存排序和计算结果，只有mockData变化时才重新计算：

function DataBoard() {
  const [searchText, setSearchText] = React.useState('');

  // 用useMemo缓存排序结果（依赖mockData）
  const sortedData = React.useMemo(() => {
    console.log('执行排序计算'); // 用于观察是否重新计算
    return mockData.sort((a, b) => b.销售额 - a.销售额);
  }, [mockData]); // 依赖数组：只有mockData变化时重新计算

  // 用useMemo缓存TOP10平均值（依赖sortedData）
  const top10Average = React.useMemo(() => {
    console.log('执行TOP10计算');
    return sortedData.slice(0, 10).reduce((sum, item) => sum + item.销售额, 0) / 10;
  }, [sortedData]); // 依赖数组：只有sortedData变化时重新计算

  return (
    <div>
      <input 
        type="text" 
        value={searchText} 
        onChange={(e) => setSearchText(e.target.value)} 
        placeholder="搜索..." 
      />
      <p>TOP10平均销售额：{top10Average.toFixed(2)}</p>
    </div>
  );
}

效果：

首次渲染：执行排序和计算，输出两次log；
修改searchText：组件重新渲染，但mockData和sortedData未变，直接使用缓存结果，无log输出；
mockData变化（如从API获取新数据）：重新执行计算，输出log。

示例3：进阶优化（避免依赖数组遗漏）

如果mockData是从父组件传递的Props，需要注意依赖数组的正确性：

function DataBoard({ data }) { // data是父组件传递的Props
  const [searchText, setSearchText] = React.useState('');

  // 正确写法：依赖数组包含data（Props变化时重新计算）
  const sortedData = React.useMemo(() => {
    return data.sort((a, b) => b.销售额 - a.销售额);
  }, [data]); // 必须包含data，否则data变化时不会重新计算

  // 错误写法：依赖数组为空（data变化时不会重新计算，导致缓存过期）
  // const sortedData = React.useMemo(() => {
  //   return data.sort((a, b) => b.销售额 - a.销售额);
  // }, []); 

  return (
    // ...
  );
}

四、优化前后性能对比

用表格对比优化前后的表现，更直观感受useMemo的价值：

对比项	未优化	useMemo优化
触发计算的时机	每次组件渲染	仅依赖项变化时
1000条数据计算耗时	约80ms（Chrome测试）	首次80ms，后续≈0ms
用户体验	输入框输入时卡顿	输入流畅，无延迟
内存占用	每次渲染生成新数组（内存浪费）	缓存结果，复用内存
调试难度	难以定位卡顿原因	通过log清晰看到计算触发时机

五、面试题回答方法

正常回答（结构化）：

“useMemo是React提供的性能优化Hook，用于缓存复杂计算的结果，避免重复执行。核心用法是：

参数：接收一个计算函数（factory）和依赖数组（deps）；
逻辑：首次渲染时执行factory并缓存结果；后续渲染时，若deps中的变量未变化，直接返回缓存值；若变化则重新计算并更新缓存；
适用场景：计算耗时的操作（如排序、过滤、数学运算）、需要避免重复渲染的组件Props（配合React.memo）；
注意事项：依赖数组需包含所有影响计算结果的变量，避免遗漏导致缓存过期；不要滥用（简单计算无需缓存）。”

大白话回答（接地气）：

“就像你做早餐——打鸡蛋、煎牛排很耗时。如果每次有人敲门你都重新做一份，那肯定累瘫。useMemo就像你的‘早餐缓存机’：第一次做的时候认真做，之后只要食材（依赖项）没换，直接从缓存拿。这样哪怕有人频繁敲门（组件频繁渲染），你也不用重复煎牛排（重复计算），省时间又省力气～”

六、总结：3个使用原则+2个避坑指南

3个使用原则：

只缓存耗时计算：如果计算1ms内完成，不用useMemo（缓存本身也有开销）；
正确填写依赖数组：依赖数组必须包含所有影响计算结果的变量（包括Props、State、外部变量）；
避免过度缓存：不要给所有计算都加useMemo，可能导致代码冗余，反而影响可维护性。

2个避坑指南：

依赖数组为空≠只计算一次：如果依赖数组为空，useMemo确实只在首次渲染计算，但如果计算函数依赖了外部变量（如Props/State），会导致闭包问题，拿到的是旧值；
不要缓存引用类型：如果缓存的是对象/数组，即使内容没变，引用变化也会触发重新计算（可用useMemo包裹，确保引用稳定）。

七、扩展思考：4个高频问题解答

问题1：useMemo和useCallback有什么区别？

解答：

useMemo缓存计算结果（值）；
useCallback缓存函数引用（用于避免子组件不必要的重新渲染）。
示例：

// useMemo缓存值
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// useCallback缓存函数
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

问题2：依赖数组为空时，useMemo会怎样？

解答：依赖数组为空时，useMemo只在组件挂载时计算一次，之后永远使用缓存值。但如果计算函数依赖了外部变量（如State/Props），会导致闭包陷阱，拿到的是组件挂载时的旧值。除非确定计算不依赖任何外部变量（如纯函数），否则不建议这样做。

问题3：如何调试useMemo是否生效？

解答：

在计算函数中添加console.log，观察是否重复执行；
使用React DevTools的“Highlight Updates”功能，查看组件是否不必要地重新渲染；
用performance.now()测量计算耗时，对比优化前后的时间差。

问题4：useMemo可以替代React.memo吗？

解答：不能。React.memo用于缓存组件实例，避免子组件因父组件渲染而重新渲染（浅比较Props）；useMemo用于缓存计算结果。两者配合使用效果更佳：

// 子组件用React.memo缓存
const Child = React.memo(({ data }) => {
  // 子组件逻辑...
});

// 父组件用useMemo缓存data，确保data引用不变时Child不重新渲染
function Parent() {
  const [searchText, setSearchText] = React.useState('');
  const filteredData = useMemo(() => filterData(searchText), [searchText]);

  return <Child data={filteredData} />;
}