react usememo（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么需要 React useMemo？

在构建 React 应用时，随着组件层级和逻辑复杂度的增加，性能优化逐渐成为开发者必须面对的课题。当组件频繁渲染时，若存在重复计算或不必要的数据处理，会导致界面卡顿和资源浪费。此时，useMemo 这个 Hook 就像一位精明的“备忘录管理员”，通过缓存计算结果，帮助开发者高效管理资源。本文将从零开始，结合具体案例，深入解析 useMemo 的工作原理与最佳实践。

一、useMemo 的基础用法：缓存计算结果

1.1 useMemo 的基本语法

useMemo 是 React 提供的一个 Hook，用于记忆计算结果，避免重复执行耗时操作。其基本语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 函数参数：第一个参数是一个函数，返回需要缓存的值。
• 依赖数组：第二个参数是一个数组，包含所有影响计算结果的变量。当这些变量未发生变化时，useMemo 会直接返回缓存值。

1.2 场景示例：计算复杂值的优化

假设我们有一个需要频繁计算的函数，例如生成斐波那契数列：

function Fibonacci({ n }) {
  const fib = useMemo(() => {
    const arr = [];
    for (let i = 0; i < n; i++) {
      if (i <= 1) arr.push(1);
      else arr.push(arr[i - 1] + arr[i - 2]);
    }
    return arr;
  }, [n]);
  
  return <div>{fib.join(", ")}</div>;
}

当 n 不变时，useMemo 会直接返回缓存的 fib 数组，避免重复计算。若直接在组件中执行该计算，每次渲染都会触发循环，性能损耗显著。

二、useMemo 的工作原理：闭包与依赖追踪

2.1 闭包与缓存机制

useMemo 的核心逻辑基于 闭包 和 依赖数组。每当组件渲染时，React 会：

1. 检查依赖数组中的变量是否发生变化。
2. 若变量未变化，则返回上一次的缓存值。
3. 若变量变化，则重新执行函数并更新缓存。

这一机制类似于“备忘录”：当你需要重复使用某个复杂计算的结果时，只需查看备忘录中的记录，无需每次都重新推导。

2.2 依赖数组的陷阱

依赖数组的设计看似简单，但若配置不当，可能导致意外行为。例如：

// 错误示例：依赖数组未包含所有变量
const filteredItems = useMemo(() => {
  return items.filter(item => item.status === filterStatus);
}, [items]); // 忽略了 filterStatus！

由于 filterStatus 未被包含在依赖数组中，当其变化时，useMemo 仍会返回旧的 filteredItems，导致数据不同步。正确写法应为 [items, filterStatus]。

三、进阶技巧：优化复杂场景的性能

3.1 与 useCallback 的协同使用

当需要缓存函数时，useCallback 是更合适的选择，但二者在某些场景下可配合使用。例如：

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

// 缓存计算结果
const filteredCount = useMemo(() => calculateFilteredCount(count, filter), [count, filter]);

// 缓存函数引用
const handleUpdate = useCallback(() => {
  // 使用 memoizedValue
  setCount(filteredCount + 1);
}, [filteredCount]);

通过组合 useMemo 和 useCallback，既能避免重复计算，又能确保函数引用的稳定性。

3.2 处理不可变对象的依赖

当依赖项为对象或数组时，需特别注意引用变化问题。例如：

const config = useMemo(() => ({
  timeout: 3000,
  retry: 3
}), [props.environment]); // 确保 environment 是稳定值

若直接将整个 config 对象作为依赖，每次渲染都会触发重新计算。正确的做法是仅监听直接影响配置的变量。

四、常见误区与解决方案

4.1 依赖数组遗漏关键变量

问题：未将所有影响计算结果的变量加入依赖数组，导致结果与预期不符。
解决方案：使用 ESLint 插件（如 eslint-plugin-react-hooks）强制检查依赖数组完整性。

4.2 滥用 useMemo 导致内存泄漏

问题：长期缓存无用数据，占用内存。例如在组件卸载后未清理缓存。
解决方案：仅缓存频繁且计算成本高的值，并在必要时使用 useEffect 清理资源。

4.3 误将副作用逻辑放入 useMemo

useMemo 用于计算值，而非执行副作用（如 API 请求）。此类逻辑应改用 useEffect，否则可能导致不可预知的行为。

五、实战案例：优化组件渲染性能

5.1 场景描述：动态表格组件

假设有一个展示用户列表的组件，需要根据筛选条件动态过滤数据。原始代码如下：

function UserList({ users, filter }) {
  const filteredUsers = users.filter(user => user.name.includes(filter));
  
  return (
    <div>
      {filteredUsers.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

每次 filter 变化时，filteredUsers 会重新计算，但若 users 数据量大，可能导致卡顿。

5.2 优化方案：引入 useMemo

function UserList({ users, filter }) {
  const filteredUsers = useMemo(() => {
    return users.filter(user => user.name.includes(filter));
  }, [users, filter]); // 添加 users 作为依赖
  
  return (
    <div>
      {filteredUsers.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

此时，只有在 users 或 filter 变化时才会触发过滤操作，显著提升性能。

六、性能对比与工具辅助

6.1 Chrome DevTools 分析

通过 React DevTools 的 Profiler 工具，可以直观观察组件渲染次数和时间。优化前后的对比可能如下：

6.2 使用性能分析工具

工具如 React.memo 或 React Profiler 可帮助定位性能瓶颈。例如：

// 用 React.memo 缓存组件
const MemoizedUserCard = React.memo(UserCard);

结论：合理使用 useMemo 的关键原则

useMemo 是 React 性能优化的重要工具，但需遵循以下原则：

1. 按需使用：仅在计算成本高、重复执行频繁的场景使用。
2. 依赖精准：确保依赖数组包含且仅包含影响计算结果的变量。
3. 避免滥用：不要因过度优化而牺牲代码可读性。

通过本文的讲解，读者应能掌握 useMemo 的核心逻辑、常见误区及实战应用。记住，性能优化是“艺术与科学的结合”，合理运用工具与策略，才能构建出流畅高效的 React 应用。