性能检测 Profiler API

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Profiler id="test" onRender={test}>
      <Test {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

可以再 react 中的任何地方调用它来测量 render 开销，并且可以多次使用，也可以嵌套使用。It requires two props: an id (string) and an onRender callback (function) 。会在 一个组件 commits 的时候调用这个 callback。

onRender callback

function onRenderCallback(
  id, // 正在被提交的组件外层的那个 Profiler，上的 id。可以代表哪个组件更新了。
  phase, // "mount" | "update"。表示是卸载了还是更新了。
  actualDuration, // 更新所花的时间。
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
}