reactjs - React.memo 性能比 React.PureComponent 差

Question

不久前，我重构了单元格渲染器组件以实现性能提升(我有一个巨大的表格)。我从功能性无状态组件重构为 PureComponent。例如:

import React from 'react';
import PropTypes from 'prop-types';

class SomeCell extends React.PureComponent {
  render() {
    const { pizzaOrder } = this.props;
    return (
      <>
        {pizzaOrder.name}
        <br />
        {pizzaOrder.price}
      </>
    );
  }
}

SomeCell .propTypes = {
  pizzaOrder: PropTypes.object,
};

export default SomeCell ;

现在我看到 React.memo 已发布，因此我更新为 react@16.6.0 和 react-dom@16.6.0 (来自16.5.2)并从PureComponent重构为React.memo，期望它会更快(没有调用生命周期方法，函数小于内存中的类等...):

import React from 'react';
import PropTypes from 'prop-types';

const SomeCell = React.memo(function({ pizzaOrder }) {
  return (
    <>
        {pizzaOrder.name}
        <br />
        {pizzaOrder.price}
    </>
  );
});

SomeCell .propTypes = {
  pizzaOrder: PropTypes.object,
};

export default SomeCell;

令我惊讶的是，性能显着下降。

您知道可能出现什么问题吗？

生产模式下的配置文件数据(Chrome 中没有插件)显示，使用 PureComponent 进行的脚本编写比之前多得多(我的案例的脚本编写时间从 0.5 秒缩短到 3.8 秒)。

编辑:经过一番调查，似乎这不是 React.memo 的问题，而是新版本的 React 的问题。我已将单元格渲染器恢复为 PureComponent 并保留新的 React@16.6.0 版本，结果(性能明显降低)仍然存在

Answer 1

根据@skyboyer的建议，在 React Repository 中创建了一个问题.

问题摘要(2018-11-11):

• 该问题与 React 本身无关，而是与 uglify-es(有缺陷的)优化有关。
• uglify-es 是内联代码(不应内联)。
• uglify-es 不再积极维护。
• 建议的解决方案是使用 terser 作为替代品。

• 如果您使用 uglifyjs-webpack-plugin 或 Webpack 4.x.x(默认使用 uglifyjs-webpack-plugin)，您应该更改webpack configuration 中的缩小器选项像这样:

  const TerserWebpackPlugin = require('terser-webpack-plugin');
  
  module.exports = {
    //...
    optimization: {
      minimizer: [
        new TerserWebpackPlugin({ /* your config */ })
      ]
    }
  };