reactjs – React.memo性能比React.PureComponent更差

发布时间：2020-12-15 20:16:53 所属栏目：百科来源：网络整理

导读：前段时间我对单元渲染器组件进行了重构以实现性能提升(我有一个巨大的表).我从功能无状态组件到PureComponent进行了重构.例如.： import React from 'react';import PropTypes from 'prop-types';class SomeCell extends React.PureComponent { render() { c

前段时间我对单元渲染器组件进行了重构以实现性能提升(我有一个巨大的表).我从功能无状态组件到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;

令我惊讶的是,表现明显下降.

你知道它有什么问题吗？

prod模式下的配置文件数据(没有chrome中的插件)表明在使用PureComponent之前会发生更多的脚本编写(我的案例的脚本编写时间从0.5秒增加到3.8秒).

编辑：经过一些调查,似乎它不是React.memo的问题,而是新版本的React.我已将单元格渲染器还原为PureComponent并保留了新的react@16.6.0版本,结果(性能显着降低)仍然存在

解决方法

正如@skyboyer所建议的,问题是在 React Repository创建的.

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

>这个问题与React本身无关,而与uglify-es(buggy)优化无关.
> uglify-es是内联代码(不应该内联).
> uglify-es不再维护.
>建议的解决方案是使用terser作为替代品.
>如果您使用的是uglifyjs-webpack-plugin或Webpack 4.x.x(默认使用uglifyjs-webpack-plugin),您应该更改webpack configuration中的minifier选项,如下所示：

const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [
      new TerserWebpackPlugin({ /* your config */ })
    ]
  }
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!