react memo（千字长文）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 的性能优化始终是一个核心话题。随着应用复杂度的提升，如何避免不必要的渲染成为开发者关注的重点。在这一背景下，React Memo 作为 React 官方提供的轻量级优化工具，为函数组件提供了“开箱即用”的性能提升方案。无论你是刚接触 React 的新手，还是希望系统掌握优化技巧的中级开发者，理解 React Memo 的原理和使用场景都将帮助你写出更高效、更易维护的代码。

基本概念与核心原理

什么是 React Memo？

React Memo 是 React 16.6 版本引入的一个高阶组件（Higher-Order Component，HOC）。它的核心作用是通过浅层比较（shallow comparison）判断 props 是否发生变化，从而决定是否跳过组件的重复渲染。

形象比喻：快递员的“快速筛选”

想象一个快递分拣中心，每个包裹需要被检查是否需要重新配送。如果包裹的地址、重量、收件人信息完全相同，快递员会直接跳过处理，避免重复劳动。
React Memo 的作用类似：当它包裹的组件接收到新的 props 时，会快速检查新旧 props 是否有差异。如果没有变化，组件就不会重新渲染，直接复用之前的结果。

浅层比较的实现原理

React Memo 的核心逻辑基于浅层比较（Shallow Comparison）：

1. 简单类型（如数字、字符串）：直接对比值是否相等。
2. 引用类型（如对象、数组）：仅对比引用地址是否相同。

例如，当 props 是一个对象时，若新旧对象的引用地址不同，React Memo 会认为 props 发生了变化，触发重新渲染；反之则跳过渲染。

const MyComponent = React.memo(({ count }) => {
  // 组件逻辑
});

与 PureComponent 的区别

React Memo 是函数组件的优化方案，而 PureComponent 是类组件的优化方案。两者均基于浅层比较，但适用场景不同：

• PureComponent：自动对类组件的所有 props 和 state 进行浅层比较。
• React Memo：仅对 props 进行浅层比较，需手动包裹函数组件。

使用场景与适用条件

适用场景

1. 简单 props 的组件：当组件的 props 是简单类型（如数字、布尔值）或不可变对象时，React Memo 能有效减少渲染。
2. 高频触发更新的场景：例如，当父组件频繁更新时，避免子组件不必要的渲染。
3. 纯展示型组件：无状态或状态独立的组件（如按钮、列表项）尤其适合使用。

非适用场景

1. 复杂对象的 props：若 props 包含嵌套对象或数组，且内部属性可能变化，React Memo 无法感知深层变化。
2. 依赖外部状态：如果组件的渲染逻辑依赖全局状态（如 Redux、Context）而非直接 props，需结合其他优化手段。

实际案例：优化计数器组件

假设有一个计数器组件，父组件每秒更新一次时间戳，但子组件仅展示计数器的值：

// 未优化版本  
function Counter({ count }) {
  console.log("Counter rendered");
  return <div>{count}</div>;
}

// 父组件每秒更新时间戳  
function App() {
  const [count, setCount] = useState(0);
  const timestamp = Date.now();
  
  useEffect(() => {
    setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
  }, []);

  return <Counter count={count} timestamp={timestamp} />;
}

此时，Counter 组件会每秒重新渲染，因为 timestamp 每次更新导致 props 变化。使用 React Memo 后：

// 优化后  
const MemoizedCounter = React.memo(({ count }) => {
  console.log("Counter rendered");
  return <div>{count}</div>;
});

function App() {
  // 其他逻辑保持不变  
  return <MemoizedCounter count={count} />;
}

由于 timestamp 不再传递到 MemoizedCounter，组件仅在 count 改变时渲染，性能显著提升。

深入原理：为什么 React Memo 有效？

虚拟 DOM 与渲染流程

React 的渲染流程中，当父组件更新时，所有子组件都会进入“是否需要重新渲染”的判断阶段。若子组件未使用 React Memo 或 PureComponent，React 默认认为它们需要重新渲染。

React Memo 通过拦截 props 变化，提前终止不必要的渲染流程，避免后续的虚拟 DOM 比较和真实 DOM 更新，从而减少计算开销。

内存比较的局限性

浅层比较的局限性在于无法检测嵌套对象的深层变化。例如：

const Parent = () => {
  const [data, setData] = useState({ name: "Alice", age: 20 });

  return (
    <MemoizedChild data={data} />
  );
};

const MemoizedChild = React.memo(({ data }) => {
  // 组件逻辑
});

当通过 setData({ ...data, age: 21 }) 更新时，data 的引用地址会变化，触发 MemoizedChild 的重新渲染。但若通过 data.age = 21 直接修改，则引用地址不变，导致 React Memo 无法感知变化，组件不会重新渲染——这会引发数据展示错误。

解决复杂对象的比较问题

此时可通过 useMemo 或 自定义比较函数 优化：

方法一：使用 useMemo 创建不可变对象

function Parent() {
  const [age, setAge] = useState(20);
  const data = useMemo(() => ({ name: "Alice", age }), [age]);

  return <MemoizedChild data={data} />;
}

data 的引用仅在 age 变化时更新，确保 React Memo 能正确判断。

方法二：自定义比较函数

const MemoizedChild = React.memo(
  ({ data }) => { /* 组件逻辑 */ },
  (prevProps, nextProps) => {
    // 深层比较 name 和 age
    return (
      prevProps.data.name === nextProps.data.name &&
      prevProps.data.age === nextProps.data.age
    );
  }
);

通过自定义比较函数，React Memo 可以感知到嵌套对象的深层变化。

高级用法与常见误区

自定义比较函数的实践

在需要处理复杂对象时，自定义比较函数是关键。例如，对比两个数组是否包含相同元素：

const List = React.memo(
  ({ items }) => <div>{items.join(", ")}</div>,
  (prevProps, nextProps) => {
    // 比较数组长度和每个元素
    if (prevProps.items.length !== nextProps.items.length) {
      return false;
    }
    for (let i = 0; i < prevProps.items.length; i++) {
      if (prevProps.items[i] !== nextProps.items[i]) {
        return false;
      }
    }
    return true;
  }
);

常见误区

1. 过度使用 React Memo：并非所有组件都需要包装。对于简单、低频更新的组件，优化收益可能微乎其微，反而增加代码复杂度。
2. 忽略深层 props 的变化：如前所述，直接修改对象属性会破坏浅层比较的可靠性。
3. 与函数式组件混淆：如果组件内部使用闭包或未被正确 memo 化，即使包裹了 React Memo，仍可能触发渲染。

结论

React Memo 是 React 开发者优化性能的“瑞士军刀”，尤其适合函数组件场景。通过理解其浅层比较机制、合理选择使用场景，并结合 useMemo、自定义比较函数等工具，开发者可以显著减少不必要的渲染，提升应用性能。

然而，优化并非一劳永逸：需要结合实际数据监控（如 React Profiler）定位性能瓶颈，并根据具体场景选择最合适的方案。掌握 React Memo 的核心思想后，你将能够更自信地构建高效、可维护的 React 应用。

在后续学习中，建议进一步探索 React 的其他优化策略，如 Memoization with useCallback、Context API 与 useReducer 等，以构建完整的性能优化体系。