Reactjs 如何在react渲染函数中显示性能

我有一个react render函数，我想打印出运行该函数所需的时间。我的代码存根在这里。我现在使用的是性能库和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>
    );

const start=now（）；
const{list，load}=this.props；//eslint禁用线
返回(
实验页
{load（Math.floor（（Math.random（）*100）+1））；}>
单击以重新加载。

{
list.map（（foo）=>{
回复你好，{foo}！；
})
}
{() => {
document.getElementById（“结果”）.innerHTML='呈现的总时间为'+（now（）-start）；//eslint禁用行
}}
);

我不知道为什么它没有为您显示，但您是否尝试过使用componentDidMount（）而不是在渲染中

此外，React的性能工具在检测浪费的渲染方面也做得很好：

---

只需使用React.js Perf API即可。

---

别忘了使用开发的React包，而不是生产包。

为什么您要在小时候传递函数？我想这很容易。原始行是呈现的总时间是{（now（）-start）}，这可以正常工作，但它位于页面底部。我想把它显示在页面顶部的按钮下。那你为什么不把它移到那里呢？“我觉得这很容易。”是什么给你的印象是，你可以将函数作为子函数传递给React组件？因为now（）需要在末尾计算，但我希望答案在开头。我认为你对JSX的工作方式有误解。您的代码基本上转换为

React.createElement（'div'，[React.createElement（…），list.map（…），now（）-start]）

。这只是一个函数调用。也就是说，如果您只是想知道映射列表需要多长时间，那么请事先这样做：

const items=list.map（…）；返回{items}{now（）-start}。如果确实要测量渲染性能，请使用React perf工具。