React perf总是打印空数组

React perf always prints empty Array

本文关键字：数组 打印 perf React      更新时间：2023-09-26

我正试图通过使用react-perf工具来测试我的应用程序的性能。问题是它不起作用。我打电话给

Perf.start()
Perf.stop()
Perf.printWasted()

在控制台中，它可以工作（没有控制台错误或警告），但printWasted()总是返回空的Array和消息

总时间：0.00 ms

这也适用于其他函数，如printInclusive()和printExclusive()问题出在哪里？P.S我使用的是react路由器，react性能如何？也许这会引起一些问题？此外，process.env.NODE_ENV未设置为生产，我使用的是React 0.13.3

我遇到了与这里描述的相同的问题——不过，在我的情况下，这是一个愚蠢的错误。你（或将来的其他人）可能也犯了同样愚蠢的错误，所以我想我应该解释一下我的所作所为。

我正在写一些测试代码，我将React库直接加载到页面中-

<script src="/Script/ThirdParty/react-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>

当我想了解页面的运行情况时，我还加载了"插件"脚本-

<script src="/Script/ThirdParty/react-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script>

然后刷新页面，转到控制台并键入

React.addons.Perf.start()

我与页面进行了交互，以便重新呈现，然后键入

React.addons.Perf.stop()
React.addons.Perf.printWasted()

我总是有

阵列[0]

总时间：0.0ms

错误在于插件脚本不应该加载。除了到主React脚本之外，它应该加载，而不是-即

<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>

在纠正了这一点之后，我开始从perf-tool方法中获得结果。

在使用webpack的extarnals时，我偶然发现了同样的问题，如本次快速启动中所建议的：https://www.typescriptlang.org/docs/handbook/react-&amp-webpack.html

// webpack.conf.js:
//...
externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

带有

// index.js
// ...
window.Perf = require('react-addons-perf')

和

// index.html
<script src="/js/react/dist/react.js"></script>
<script src="/js/react-dom/dist/react-dom.js"></script>
<script src="/js/bundle.js" charset="UTF-8"></script>

事实证明，此配置还导致Perf结果始终为空。删除externals条目（从而将react放入webpack的捆绑包中）解决了这个问题。事实证明，构建时的性能没有差异。

相关文章：