如何在React中使用非类的函数式方式实现纯组件

React 中函数式组件的纯组件能力由高阶组件 React.memo 提供，它的效果和类组件的 React.PureComponent 一致：会对组件接收的 props 做浅比较，只要 props 没有发生变化，就会跳过当前组件的重渲染，实现性能优化。

你给出的代码修改为纯组件的写法如下：

import { memo } from 'react';

const MyComponent = () => { 
  return (<h1>I am functional component.</h1>)
}

// 用memo包裹组件后导出即可
export default memo(MyComponent);

补充注意事项：

• React.memo 默认只做浅比较，如果你的组件接收引用类型的 props（对象、数组、函数等），浅比较无法准确识别内容变化，此时可以传入第二个参数自定义比较逻辑：

// 自定义比较函数：接收旧props和新props，返回true表示不需要重渲染，返回false表示需要重渲染
const arePropsEqual = (prevProps, nextProps) => {
  // 示例：只对比用户id是否变化
  return prevProps.user.id === nextProps.user.id;
}

export default memo(MyComponent, arePropsEqual);

• 不要滥用 React.memo，如果组件本身重渲染成本很低，或者props变化非常频繁，额外的props比较逻辑反而会增加性能开销。

内容的提问来源于stack exchange，提问作者Badal Sharma