iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

React 從 0.5 到 1系列 第 15

[鐵人賽 Day15] 如何分析 memoization 的成效呢?Profiler API

Why Profiler ?

Profiler 可以用來測量 React app render 的次數,以及 render 所花費的成本,不過在 production build 當中會被停用,所以如果要針對 production,要使用另外一套工具

應用場景與方法

Profiler 可以被放在 React tree 的任何一處,他需要 idonRender 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


上一篇
[鐵人賽 Day14] 來讀 Hooks FAQ 文件-lifecycle methods 如何對照到 Hooks?
系列文
React 從 0.5 到 115

尚未有邦友留言

立即登入留言