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

Question

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

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

Answer 1

React 开发工具已经添加了重新加载和开始分析按钮。

Answer 2

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

资源

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>