React性能优化的深度解析：React.memo和useMemo的真相与误区

引言

在React应用开发中，性能优化始终是开发者关注的重点。随着应用规模的扩大，组件渲染效率成为影响用户体验的关键因素。React.memo和useMemo是React提供的两个常用性能优化API，但它们常常被误解和滥用。本文将深入剖析这两个API的工作原理、适用场景，并通过实际案例分析它们的优缺点，帮助开发者做出明智的性能优化决策。

技术原理

React.memo与useMemo的本质区别

React.memo和useMemo虽然名称相似，但它们优化的对象完全不同：

• React.memo：是一个高阶组件(HOC)，主要用于组件级别的渲染优化。它通过浅比较(shallow comparison)父组件传入的props，决定是否跳过组件的重新渲染。

• useMemo：是一个Hook，主要用于计算级别的优化。它缓存函数的计算结果，避免在组件重新渲染时重复执行昂贵的计算操作。

它们的真正作用

一个容易被误解的观点是认为这两个API都是用来"提升React的性能"。实际上，它们并非让React运行得更快，而是在特定条件下让React"不做事"：

1. React.memo不是让渲染变快，而是避免渲染：它通过浅比较props，决定是否需要重新渲染组件。

2. useMemo不是让计算变快，而是避免重复计算：它通过缓存计算结果，在依赖项不变时直接返回缓存值，而不是重新执行计算。

技术实操

正确使用React.memo

React.memo适合用于那些接收相同props不频繁变化，但渲染成本较高的纯展示组件：

// ✅ 适合使用React.memo的场景
const ExpensiveChart = React.memo(({ data }) => {
  console.log('渲染复杂图表组件');
  // 假设这里有复杂的图表渲染逻辑
  return (
    <div className="chart-container">
      {/* 复杂图表渲染 */}
      {data.map(item => (
        <div key={item.id} className="chart-item">
          {item.value}
        </div>
      ))}
    </div>
  );
});

// ❌ 不适合使用