Question

我有一个反应渲染功能，我想打印出运行该功能所需的时间。我的代码存根就在这里。我正在使用performance-now库和ES6 +。

现在最后一行我打算打印出运行渲染功能所需的时间，但没有显示。如果我只是显示最后一行，那么它是有效的。但我希望在应用程序的顶部显示性能，而不是在底部。

const start = now();
    const {list,load} = this.props; // eslint-disable-line
    return (
      <div className="container">
      <Helmet title="Experient Page"/>
      <h1>Experiment Page</h1>
      <button onClick={() => {load(Math.floor((Math.random() * 100) + 1));}}>
       Click to reload.
      </button>
      <p id="result"></p>
      {
        list.map((foo) => {
          return <div>Hello, {foo}!</div>;
        })
      }
      {() => {
        document.getElementById("result").innerHTML = 'Total time rendered is ' + (now() - start); // eslint-disable-line
      }}
      </div>
    );

Answer 1

只需使用React.js Perf API here即可。别忘了使用开发的React捆绑而不是生产捆绑。

Answer 2

我不知道为什么它没有显示给你但是你尝试过使用componentDidMount（）而不是渲染内部吗？

此外，React的性能工具可以很好地检测浪费的渲染： https://facebook.github.io/react/docs/perf.html

如何在反应渲染功能中显示性能

2 个答案: