React perf 总是打印空数组答案

【问题标题】：React perf always prints empty ArrayReact perf 总是打印空数组
【发布时间】：2016-08-30 13:34:23
【问题描述】：

我正在尝试使用 react perf 工具测试我的应用程序的性能。问题是它不起作用。我打电话

Perf.start()

Perf.stop()

Perf.printWasted()

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

总时间：0.00 毫秒

printInclusive() 和 printExclusive() 等其他函数也会发生这种情况可能是什么问题？ PS我正在使用react-router，react perf的表现如何？也许这会导致一些问题？另外，process.env.NODE_ENV 没有设置为生产，我正在使用React 0.13.3

【问题讨论】：

也许这是一个愚蠢的问题，但你不可能一个接一个地运行它们，对吧？
@Hatsuney 你说的“他们”和“一个接一个”是什么意思:)？如果您的意思是 start() 和 stop() 方法，我会运行 start，然后执行一些导致应用重新渲染的操作，然后在某个时间点调用 stop()，然后在 stop() 之后调用 printWasted()。

标签： javascript performance reactjs performance-testing

【解决方案1】：

我遇到了与此处描述的相同的问题 - 但在我的情况下，这是一个愚蠢的错误。您（或将来的其他人）可能犯了同样的愚蠢错误，所以我想我会解释一下我做了什么。

我正在编写一些测试代码，将 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 工具方法中获取结果。

【讨论】：

实际上，这与对我有用的解决方案相同。我忘了更新这个线程。感谢您分享这个解决方案，即使我应该这样做！
这也帮了我很多忙！我使用 Browserify 将我的应用程序捆绑到 vendor 和 main 包中，并且由于我未能在供应商包中同时包含 react 和 react-addons-perf，它们最终没有共享代码并且无法工作。

【解决方案2】：

我在使用 webpack's extarnals 时偶然发现了同样的问题，正如本快速入门中所建议的：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 的包中）解决了这个问题。事实证明没有构建时间性能差异。

【讨论】：