React.memo 使用指南 📌

React.memo 是 React 中用于 优化组件渲染性能 的工具，通过记忆组件的渲染结果，避免不必要的重复渲染。它特别适用于子组件接收 props 但未发生改变时，减少重新渲染的开销。

🧠 核心原理

React.memo 的工作方式与 React 纯函数特性一致：

• 浅比较 props：如果 props 未变化，直接返回记忆的 UI
• 避免重复渲染：仅在 props 或 state 改变时触发重新渲染

const MemoizedComponent = React.memo(function Component({ prop1, prop2 }) {
  // 组件逻辑
});

📚 使用场景

🛠 实现技巧

1. 自定义比较函数
   使用 areEqual 参数控制比较逻辑：

   const MemoizedComponent = React.memo(
     function Component({ prop1, prop2 }) {
       // ...
     },
     (prevProps, nextProps) => {
       return isEqual(prevProps.prop1, nextProps.prop1) && 
              isEqual(prevProps.prop2, nextProps.prop2);
     }
   );
   

2. 记忆函数组件
   对函数组件使用 React.memo 可减少渲染次数：

   

3. 注意点

   • 不适用于类组件，需用 PureComponent 替代
   • 无法直接记忆 ref 或 forwardRef 的内容
   • 与 useMemo 作用不同，前者优化渲染，后者缓存计算结果

📌 相关资源

• 了解更多：/react/advanced
• 相关教程：/react/optimization

🚀 优化效果示例