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

Question

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

当前，如果我启动探查器并刷新页面，它将停止探查器。

Answer 1

<块引用>

要分析初始渲染，您可以使用重新加载并开始分析按钮，这将在初始渲染之前重新加载页面并开始分析。然后，您可以像往常一样继续或停止录制。

source

Answer 2

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

Answer 3

我不知道您是否可以命中记录并重新加载页面，但是如果您要测量页面加载，我认为您可以将事件探查器放入​​代码中，然后控制台记录结果。像这样：

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>