Question

我对如何使用React的性能工具感到困惑。我目前的用法如下所示：

var Perf = React.addons.Perf;
Perf.start();
this.setState({
    newState: newStateObject,
}, function(){
    Perf.printInclusive();
    Perf.stop();
});

这不会在页面上呈现任何内容并脱口秀

Uncaught TypeError: Cannot read property 'counts' of undefined

Answer 1

请参阅https://github.com/facebook/react/issues/3389#issuecomment-79236067。

看起来Perf.start()仅在组件生命周期之外调用时才有效。因此，在启动应用程序之前调用它，或者在触发您尝试监视的事件之前直接从浏览器的控制台调用它。

Answer 2

您的错误堆栈跟踪似乎来自其他内容......

首先，您首先需要致电Perf.stop()，然后尝试拨打printInclusive()。它不会在页面上打印任何内容，它应该在浏览器的控制台中吐出一张漂亮的桌子。

但是，尝试Perf工具最简单的方法是打开浏览器的控制台，然后手动输入window.React.addons.Perf.start();，然后输入您的操作，最后window.React.addons.Perf.stop();和window.React.addons.Perf.printExclusive();或您正在使用的API调用。

Answer 3

看起来Perf.start（）应该放在render之外，所以我在渲染回调函数中添加了Perf.stop（）。

下面的代码，希望它可以帮助:)

Perf.start();

ReactDOM.render(
    <App  />,
  document.getElementById('app'),()=>{
    Perf.stop();
    var measurements = Perf.getLastMeasurements();
    console.table(Perf.getLastMeasurements());
    Perf.printInclusive(measurements);
    Perf.printExclusive(measurements);
    Perf.printWasted(measurements);
    Perf.printDOM(measurements);
  }
);

React js性能工具插件抛出“无法读取未定义的属性'计数”

3 个答案: