[铁人赛 Day15] 如何分析 memoization 的成效呢？Profiler API

Why Profiler ?

Profiler 可以用来测量 React app render 的次数，以及 render 所花费的成本，不过在 production build 当中会被停用，所以如果要针对 production，要使用另外一套工具。

应用场景与方法

Profiler 可以被放在 React tree 的任何一处，他需要 id 跟 onRender callback 的传入（当元件 commit 一个更新的时候，会被触发）。以下是使用的案例：

// 以下案例里，我们要 profile Navigation 这个元件
render(
  <App>
		// Profiler 须要传入 id 与 callback function，更详细的传入值规定请见下方
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
		// 使用 Profiler 把要验证的元件包住
    <Main {...props} />
  </App>
);

如果你需要，Profiler 也可以有多个、被放置在不同地方：

render(
  <App>
		// 这是导览列的 Profiler
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
	 // 这是主要区块的 Profiler
    <Profiler id="Main" onRender={callback}>
      <Main {...props} />
    </Profiler>
  </App>
);

关於 onRender callback

onRender callback function 可以接收许多参数，与描述被 render 的物件，以及他所花费的时间相关。

function onRenderCallback(
  id, // 刚刚被 commit 出去的 id prop
  phase, // 他在哪一个阶段？mount 还是 update？
  actualDuration, // render commit 出去的更新所花费的时间
  baseDuration, // render 出整个 subtree 而不包含 memoization 所花费的估计时间
  startTime, // React 开始 render 更新的时间点
  commitTime, // React 开始 commit 这个 update 的时间点
  interactions // 一系列归属於这个 update 的交互行为
) {
	// 可以在这里 log 出 render 时间之类的
}

假设如果我要测试自己 memoization 的实作成绩，就可以依靠以下两个参数来做比较：

actualDuration —— 这个值会暗示出 subtree 运用 memoization 方法的效率。比较理想的情况下，这个值应该要在初始 mount 之後显着的下降（因为许多下层的元件只需要在特殊的 props 更改的时候才会需要 rerender。

baseDuration —— 这个值估算出了 rendering 的最糟状况下（没有任何 memoization），要花费多少时间。

References
React profiler