React memo的浅比较与自定义比较函数的区别

当你使用 React.memo 来包装一个函数组件时，React会在其父组件重新渲染后，检查该组件的 props 是否发生了变化。如果 props 没变，就跳过本次渲染，从而提升性能。理解 React.memo 如何比较 props，是优化应用性能的关键一步。

默认的浅比较机制

React.memo 的默认行为是进行 浅比较。想象一下，你有两个完全相同的苹果。浅比较的规则是：只检查你手中拿的是不是“同一个”苹果（内存中的引用是否相同），而不是去仔细比较两个苹果的大小、颜色、重量是否一模一样。

在代码层面，浅比较的逻辑等价于下面的函数：

function shallowEqual(objA, objB) {
  if (Object.is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objB !== 'object' ||
      objA === null || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // 检查每个键对应的值是否完全相同（使用 Object.is）
  for (const key of keysA) {
    if (!Object.is(objA[key], objB[key])) {
      return false;
    }
  }

  return true;
}

这个过程可以分解为以下步骤：

1. 检查基本类型值：如果 prop 是数字、字符串、布尔值等，直接用 Object.is 比较值本身。值相等即视为相同。
2. 检查引用：如果 prop 是对象（包括数组、函数），只比较引用地址。只有当新旧 prop 指向内存中同一个对象时，才视为相同。即使对象内容完全一样，但如果是新创建的，引用不同，也会被判定为“不同”。

这会导致一些常见问题：

• 对象/数组字面量：每次渲染都创建新对象，即使内容一样，引用也不同。
• 内联函数：每次渲染都创建新函数，引用不同。
• 父组件传递的复杂对象：如果父组件因任何原因重新渲染，传递给子组件的对象 prop 即使内部数据未变，也可能是新创建的。

因此，仅依赖 React.memo 的默认浅比较，有时无法阻止不必要的渲染。

自定义比较函数：掌握更精细的控制权

为了解决浅比较的局限，React.memo 接受第二个参数：一个自定义比较函数。

const MemoizedComponent = React.memo(MyComponent, arePropsEqual);

这个函数 arePropsEqual 接收两个参数：当前的 props (prevProps) 和新的 props (nextProps)。你需要返回一个布尔值：

• 返回 true：表示 props “相等”，跳过渲染。
• 返回 false：表示 props “不相等”，触发渲染。

你可以在这里实现任何你想要的比较逻辑。 这通常意味着你需要深入对象内部进行比较，即进行 “深比较” 或针对特定属性的“部分比较”。

核心区别对比

下面的表格清晰地展示了两者的关键差异：

如何选择与实践

何时使用默认的浅比较？

优先尝试默认的 React.memo。在以下情况下，它通常就足够了：

1. 组件接收的 prop 是基本类型：如 string, number, boolean。
2. 你确保传递了稳定的引用：
   • 使用 useMemo 缓存对象或数组 prop。
   • 使用 useCallback 缓存函数 prop。
   • prop 来自 Redux 的 useSelector 等选择器，其返回的是稳定引用。
3. 组件非常简单，重新渲染的成本极低，优化的收益不大。

何时使用自定义比较函数？

当你遇到以下情况，且性能分析（如 React DevTools 的 Profiler）确认该组件是性能瓶颈时，考虑使用自定义比较：

1. 必须传递复杂对象/数组 prop，且无法用 useMemo 稳定其引用（例如，数据源来自父组件内部计算，且计算频繁）。
2. 你只关心对象 prop 中的部分字段变化，只要这些核心字段没变，组件就不需要更新。
3. 组件极其昂贵（渲染很慢，或会导致子树大规模重渲染），你需要极力避免任何不必要的渲染。

编写自定义比较函数示例

假设有一个 UserProfile 组件，它接收一个很大的 userData 对象，但我们只关心 id 和 name 是否变化：

function UserProfile({ userData, style }) {
  // ... 渲染逻辑，假设渲染代价很高
}

function areUserPropsEqual(prevProps, nextProps) {
  // 只要 id 和 name 不变，就认为相等
  return (
    prevProps.userData.id === nextProps.userData.id &&
    prevProps.userData.name === nextProps.userData.name &&
    // 通常也需要比较其他非对象 prop，比如 style
    // 但 style 可能也是对象，需要根据情况决定是否深比较
    // 为简单起见，这里假设 style 是稳定引用
    prevProps.style === nextProps.style
  );
}

export default React.memo(UserProfile, areUserPropsEqual);

重要提示： 自定义比较函数必须同时检查所有 prop，而不仅仅是我关心的那一个复杂的对象 prop。你必须确保在函数中处理了组件的所有 prop，否则可能遗漏其他 prop 的变化。

最佳实践总结

1. 从默认开始：不要过度优化。首先使用 React.memo()，不加第二个参数。
2. 稳定引用是首选：对于对象和函数 prop，优先使用 useMemo 和 useCallback 来稳定它们，这是比自定义比较更普适、更安全的做法。
3. 性能分析先行：只有当性能分析工具明确指出某组件因不必要的渲染成为瓶颈时，才考虑进一步优化。
4. 谨慎编写比较函数：如果决定使用，确保比较逻辑正确、全面、高效。错误的比较会导致功能Bug，低效的比较可能比重新渲染更耗性能。
5. 考虑组件层级：优化一个深度嵌套的昂贵组件，比优化其十多个轻量子组件效果更显著。

理解这两种比较机制，能让你在React性能优化的道路上做出更精准的决策。