Question

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

Perf.start()

Perf.stop()

Perf.printWasted()

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

总时间：0.00毫秒

对于printInclusive()和printExclusive()等其他功能也会发生这种情况可能是什么问题？ P.S我用反应路由器，反应性能如何表现呢？也许这会导致一些问题？此外，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>

当我想获得有关页面执行情况的信息时，我还加载了“插件”脚本 -

<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工具方法中获得结果。

Answer 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条目（从而将反应放在webpack的包中）解决了这个问题。原来没有构建时间性能差异。

React perf始终打印空数组

2 个答案: