本文翻譯自 5 Recommended Tools for Optimizing Performance in ReactJS，作者 Chidume Nnamdi ，有較大的刪改。
Profiler
Code SandBox
可以前往
https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在線編輯效果。
Profiler 是 React 中的一個組件，由 B. Vaughn 開發，它可以測量 React 應用渲染的頻率和渲染所花費的時間資源。Profiler 提供一個函數屬性 onRender，當組件 mount 或者 update 的時候，這個函數會接受到一些時間指標。用這些時間指標你就可以發現效率低下的代碼了。
import React, { Profiler } from 'react';
...
<Profiler id="Counter1" onRender={this.callback1(this)}>
<Counter1 />
</Profiler>
id 用來標識對應的 Profiler 組件，onRender 函數會在組件 mount 或者 update 的時候執行，它的參數結構如下：
function onRenderCallback( id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,) {
console.log('onRenderCallback', {
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
})
}
- id 組件 id；
- phase 執行階段，mount 或者 update；
- actualDuration Profiler 和子組件渲染當前的更新所花費的時間，這個值在首次 mount 的時候比 update 階段的值大；
- baseDuration 子組件最近一次渲染所持續的時長
- startTime 開始渲染當前的更新的時間戳
- commitTime React 提交當前更新的時間戳
這些數據可以幫助我們分析組件運行的效率，找到性能瓶頸。
React Developer tools
React Developer tools 是 React 官方團隊發布的一個瀏覽器插件，功能十分強大。我要介紹的是 Highlight Update 這個功能。這個工具用來檢測組件重復渲染非常有效。他可以用不同的顏色來標識組件的邊框，顏色越黃表示這個組件重復渲染的次數越多。
如果你有一個組件樹像下面這樣：
如果 Main 組件重復渲染了，那么封裝 Counter 和 Count 組件的邊界就會出現一個邊框表示重復渲染。
我們激活這個特性之后,在 ReactJS 官網開啟關閉右側的菜單，會出現邊框提示：
如何激活這個特性呢？找到調試工具的 Components 一欄，點擊右上角的小齒輪，再選中彈窗中的 Highlight updates when components render.
邊框的類型取決于重復渲染的程度，重復渲染越多，顏色越深。
| 綠色 - 低頻次更新
| 藍色 - 一般頻次更新
v 紅色 - 高頻次更新
通過使用這個工具，我們可以通過邊框顏色來輕易找到有性能問題的組件，并對它做針對性的優化。
why-did-you-render
https://github.com/welldone-software/why-did-you-render,這個工具是由 Welldone Software 開發的，用來對組件重復渲染給出反饋。
它會對組件的 props 做 diff，如果組件重新渲染了，但是 props 并沒改變，它會在命令行提醒你 props 并沒有變化。
重復渲染在小型應用中影響可能不大，但是在大型項目中將肯定會有影響。
這個工具嵌入到了 React 組件的生命周期中，所以他能在組件重新渲染時比對 props 是否變化。
使用方法很簡單，先安裝
npm install @welldone-software/why-did-you-render --save
然后注冊一次：
whyDidYouRender(React, {
trackAllPureComponents: true
});
然后對 class component：
class Counter extends React.Component {
static whyDidYouRender = true;
render() {
//...
}
}
對函數組件：
function Counter() {
return(
// ...
)
}
Counter.whyDidYouRender = true;
下面是一個完整的例子，每次 setState 時候，style={{ width: "100%" }} 都是一個新的值，所以會觸發比對。
import React from "react";
import "./styles.css";
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
trackAllPureComponents: true
});
export default class App extends React.Component {
constructor() {
super();
this.state = {
count: 1
};
}
render() {
return (
<div className="App">
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
add
</button>
<p>{this.state.count}</p>
<Comp style={{ width: "100%" }} />
</div>
);
}
}
function Comp(props) {
return <div>100</div>;
}
Comp.whyDidYouRender = true;
前往 Code SandBox 測試
https://codesandbox.io/s/distracted-architecture-t9ih2?file=/src/App.js。
Performance timeline (Browser profiling)
這個工具是 Chrome 自帶的調試工具，在 Performance 一欄中。
它可以非常有效地查看嚴重重復渲染的組件，它也可以很方便地查看 UI 不必要的更新及其出現的頻次。
在使用工具之前，先以開發模式把你的 React app 啟動起來。
然后，打開開發者工具，切換到 Performance 面板。
點擊中間的圓點或者用快捷鍵 command + e，開發者工具就開始錄制了，然后你可以在你的應用中做一些交互動作。
建議錄制時間在 20 秒以上，時間到了之后，點擊中間的 stop，或者左上角紅點。
然后我們就可以看到時間線了。
我們可以滑動選擇一片區域，然后通過 W 放大或者通過 S 縮小。選中一片區域，通過 W 鍵一直放大。
每個橙色的條代表一個執行過程，在這個條中你可以看到組件名、組件執行的階段、以及執行時間。在上面這張圖片中，App 的執行階段是 update 階段，這表示 App 組件這段時間是在執行更新操作，執行所耗費的時間是 1.71 ms。
組件每次渲染的時候一個新的黃條就會生成，如果一個組件多次渲染，通過這個 Timings 圖表可以讓你更容易追因。每個黃條的長度表示組件的執行時間，黃條越長，執行時間也越長。你可以使用這個工具來診斷頁面。
