React 中如何使用 React.memo 优化函数组件的渲染性能？

推荐答案

// www.javascriptcn.com code example
import React, { memo } from 'react';

const MyComponent = memo(({ prop1, prop2 }) => {
  // 组件逻辑
  return (
    <div>
      <p>{prop1}</p>
      <p>{prop2}</p>
    </div>
  );
});

export default MyComponent;

本题详细解读

什么是 React.memo？

React.memo 是一个高阶组件（Higher-Order Component, HOC），用于优化函数组件的渲染性能。它通过浅比较（shallow comparison）组件的 props 来决定是否重新渲染组件。如果 props 没有变化，React.memo 会跳过渲染，直接复用上一次的渲染结果。

如何使用 React.memo？

1. 基本用法：将函数组件包裹在 React.memo 中，React.memo 会返回一个新的组件，这个新组件会在 props 没有变化时避免重新渲染。

   // www.javascriptcn.com code example
   const MyComponent = memo(({ prop1, prop2 }) => {
     // 组件逻辑
     return (
       <div>
         <p>{prop1}</p>
         <p>{prop2}</p>
       </div>
     );
   });

2. 自定义比较函数：React.memo 允许你传入第二个参数，这是一个自定义的比较函数。这个函数接收前一次的 props 和当前的 props，并返回一个布尔值，表示是否跳过渲染。

   // www.javascriptcn.com code example
   const areEqual = (prevProps, nextProps) => {
     // 自定义比较逻辑
     return prevProps.prop1 === nextProps.prop1 && prevProps.prop2 === nextProps.prop2;
   };
   
   const MyComponent = memo(({ prop1, prop2 }) => {
     // 组件逻辑
     return (
       <div>
         <p>{prop1}</p>
         <p>{prop2}</p>
       </div>
     );
   }, areEqual);

何时使用 React.memo？

• 纯函数组件：当组件的渲染结果完全依赖于 props 时，使用 React.memo 可以有效避免不必要的渲染。
• 性能瓶颈：当组件的渲染成本较高，或者组件的 props 变化不频繁时，使用 React.memo 可以显著提升性能。

注意事项

• 浅比较的局限性：React.memo 默认使用浅比较，如果 props 中包含复杂对象或数组，浅比较可能无法正确判断 props 是否变化。此时可以使用自定义比较函数。
• 不要滥用：并非所有组件都需要使用 React.memo。对于简单的组件，使用 React.memo 可能会带来额外的开销，反而降低性能。