你不知道的React系列（三十七）Profiler组件

本文正在参加「金石计划」

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• 测量渲染性能

  id 标明测量的是 UI 哪一个部分

  onRender 接收渲染一些信息

  • id: string - 发生提交的 Profiler 树的 id
  • phase: "mount" | "update" | "nested-update" - 判断是组件树的第一次装载引起的重渲染，还是由 props、state 或是 hooks 改变引起的重渲染
  • actualDuration: number - 本次更新在渲染 Profiler 和它的子代上花费的时间。 这个数值表明使用 memoization 之后能表现得多好。（例如 React.memo，useMemo，shouldComponentUpdate）
  • baseDuration: number - 在 Profiler 树中最近一次每一个组件 render 的持续时间。 这个值估计了最差的渲染时间。（例如当它是第一次加载或者组件树没有使用 memoization）
  • startTime: number - 本次更新中 React 开始渲染的时间戳
  • commitTime: number - 本次更新中 React commit 阶段结束的时间戳。在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组

• 生产环境默认会忽略