纯函数组件优化：React.memo与React.PureComponent该选哪个？

先排除错误/不必要的选项 #

• 选项4（保持原样）：函数组件默认不具备纯组件的优化特性，父组件重渲染时，无论props是否变化，函数组件都会重新执行渲染逻辑，因此无法实现性能优化，直接排除。
• 选项3（Recompose.pure）：根据资料及Recompose.pure作者声明，该方法已无必要——React官方提供的React.memo完全可以替代它，且Recompose项目已进入维护状态，因此排除。

核心选项的正确实现分析 #

剩下的React.PureComponent类组件和React.memo包裹函数组件，都是纯组件性能优化的正确实现方式，核心机制一致，仅适配不同组件类型：

1. React.PureComponent类组件 #

这是类组件体系中实现纯组件的标准方式，React会在shouldComponentUpdate生命周期中自动对组件的props和state做浅比较，当比较结果相同时，跳过重渲染流程。
代码示例：

class MyPureComponent extends React.PureComponent {
  render() {
    // 纯逻辑渲染内容
    return <div>{this.props.content}</div>;
  }
}

2. React.memo高阶组件 #

这是函数组件体系中实现纯组件的标准方式，默认会对组件的props做浅比较，当props未发生变化时，复用之前的渲染结果，避免重新执行函数组件逻辑。
代码示例：

const MyPureComponent = React.memo(function MyComponent(props) {
  // 纯逻辑渲染内容
  return <div>{props.content}</div>;
});

关于性能与内存的顾虑澄清 #

你提到的《React.memo performance is worse than with React.PureComponent》中的性能问题，是由uglify打包优化配置不当导致的，并非React.memo本身的机制缺陷。在正确配置打包优化（如开启死代码消除、代码压缩）的前提下，两者的性能表现几乎无差异。

至于内存占用，React.memo作为高阶组件确实会多一层包装，但这种额外开销在现代应用中可以忽略，不会对性能造成实质性影响。

内容的提问来源于stack exchange，提问作者Archimedes Trajano