React perf 总是打印空数组

Question

我正在尝试使用 React 性能工具测试我的应用程序的性能。问题是它不起作用。我叫

Perf.start()

Perf.stop()

Perf.printWasted()

在控制台中有效（没有控制台错误或警告），但 printWasted() 总是 returns 空数组和一条消息

Total time: 0.00 ms

这也适用于 printInclusive() 和 printExclusive() 等其他函数可能是什么问题？ P.S 我正在使用 react-router，react perf 的性能如何？也许这会导致一些问题？此外，process.env.NODE_ENV 未设置为生产环境，我正在使用 React 0.13.3

Answer 1

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

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

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

当我想获取有关页面执行情况的信息时，我还加载了 "addons" 脚本 -

<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()

我总是得到

Array[0]

Total time: 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 工具方法中获取结果。

Answer 2

我在使用 webpack's extarnals as suggested in this quickstart: https://www.typescriptlang.org/docs/handbook/react-&-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 的包中）解决了这个问题。结果证明没有构建时间性能差异。

React perf 总是打印空数组

React perf always prints empty Array

javascript

performance

performance-testing

reactjs