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...
}