React.memo 工作原理深度拆解

React.memo 工作原理深度拆解

核心机制‌：

React.memo 是一种性能优化高阶组件（HOC），通过“浅比较”缓存渲染结果。当函数组件的 props 未变化时，跳过子组件渲染，复用上一次结果。
1. ‌浅比较规则

• 默认对比 props 的每个属性值（利用 Object.is 算法）。
  
• 若新旧 props 所有属性均相当，则不触发重渲染。
  

2. ‌自定义比较

• 可通过第二个参数 arePropsEqual?: (prevProps, nextProps) => boolean 覆盖默认逻辑。
  
• 返回 true 表示 props 等效，不更新；返回 false 表示必要更新。
  

---

具体利用场景

✅ ‌实用环境‌：

‌1. 纯展示型组件

• 如表单项、弹窗、静态内容组件，props 稳定且渲染本钱高。
  

2. 高频重渲染父组件的子组件

• 父组件状态频仍变化，但子组件 props 多数稳定化。
  

3. ‌复杂数据传递

• 结合 useMemo/useCallback 缓存对象或函数，避免浅比较失效。
  

❌ ‌避免滥用‌：

1. ‌组件本身轻量

• 渲染本钱低时，props 比较大概成为性能负担。
  

2. props 频仍变化

• 频仍触发浅比较反而低落性能。
  

3. ‌依靠内部状态/上下文

• 若组件依靠非 props 数据（如 Redux 状态），memo 大概失效。
  

---