React Profiler - 开始分析并重新加载页面？

Question

使用 React 开发工具和分析器，有没有办法启动分析器并重新加载页面？类似于 Chrome 开发工具具有开始分析和重新加载页面的按钮。

目前，如果我启动探查器并刷新页面，它就会停止探查器。

Answer 1

我不知道你是否可以点击记录并重新加载页面，但如果你想测量页面加载，我认为你可以将分析器放在你的代码中，然后控制台记录结果。像这样：

logProfile = (id, phase, actualTime, baseTime, startTime, commitTime, interactions) => {
  console.log(`--------- ${id}'s ${phase.toUpperCase()} phase: ---------`);
  console.log(`Time spent rendering ${actualTime} ms`); // Time spent rendering the Profiler and its descendants for the most recent "mount" or "update" render.
  console.log(`Base time: ${baseTime} ms`); // Duration of the most recent render time for each individual component within the Profiler tree.
  console.log(`React render start time (since component mounted): ${startTime} ms`); // When the Profiler began the recently committed render.
  console.log(`React render commit time (since component mounted): ${commitTime} ms`); // The time at which the current commit took place.
  console.log(interactions);
};

然后在您的渲染中：

<Profiler id="entities" onRender={this.logProfile}><Page /></Profiler>

Answer 2

To profile the initial render, you can use the reload and start profiling button, which will reload the page and start profiling before the initial render. You can then continue or stop recording as you normally would.

source

Answer 3

React Dev Tools 已经添加了重新加载和开始分析按钮。

React Profiler - 开始分析并重新加载页面？

React Profiler - Start profiling and reload page?

reactjs

react-devtools