Profiler
React16.5正式在devtool中加入了Profiler功能，用於收集每次變更導致的渲染時間，幫助開發者發現潛在的性能問題，有助於開發更高性能的React應用
如何使用
在Chrome的開發工具插件react devtool中多了一個Profiler的tab，點擊可以切換到Profiler界面
在你使用React16.5之后的版本中，開發時默認開啟Profiler功能，要想在正是環境也使用這個功能，可以看這里
默認打開Profiler什么都沒有，要點擊錄制按鈕進行記錄（跟chrome的performance挺像）。
在你開始錄制之后你可以進行一些你想分析的操作，然后再點擊stop來停止錄制，就可以得到錄制的內容
錄制內容分析
首先要了解一點，React在16版本之后處理任務分為兩個階段：
- render階段判斷哪些變更需要被處理成DOM，也就是比較上一次渲染的結果和新的更新
- commit階段React最終達成所有變更（也就是從js對象到DOM的更新），並且會調用
componentDidMount和componentDidUpdate這些生命周期方法
開發工具中通過commit階段對性能數據進行編組，會顯示在右側工具欄上
看上去像一個柱狀圖，每一個柱子代表一次commit，他的顏色和高度對應執行時長，越高顏色越黃代表時間越長，反之越短。
刪選commits
可以通過commits分組左邊的設置圖標點擊出現的對話框設置刪選選項，可以設置：
- 執行時間少於多少的不展示
- 是否顯示原聲DOM渲染的時間
火焰圖
火焰圖部分會以一個類似樹形的結構顯示一次commit過程中整個每個組件的渲染信息，跟commit分組信息類似，顏色和長短對應這個組件的渲染耗時，當然組件的渲染時間需要依賴他的子組件的渲染時間。
上圖中可見Router組件渲染時間最長，也基本等於Nav和Route的渲染時間之和，因為子組件的渲染最終肯定會被計算在父組件的渲染時間內。
你可以點擊任何一個組件來查看他的詳細信息
點擊一個組件還可以查看他的props和state
有些時候你選中一個組件，在commits分組中進行切換，在state和props面板會有內容變化的提示
排名視圖
選中火焰圖邊上的排名視圖，會展示該次commit中組件渲染時間由高到低的排名，方便刪選最長時間的渲染。
組件視圖
如果你需要查看在你進行錄制的過程中，某個組件被渲染了多少次，每次所用的時間，那么這個視圖就是為你准備的。
一看像一個柱狀圖，每一條代表一次渲染，長度和顏色代表時間的長短。
你可以通過雙擊一個組件，或者選中一個組件，點擊右上角的圖標來打開該視圖。
互動？（Interactions不知道怎么翻譯好）
在之前React已經發布了一組實驗API來追蹤更新的原因，使用這個API的信息也會在devtool中展示
途中四個綠點就是調用API的節點對應的commit，同時你也可以在火焰圖的commit信息中看到在這個commit存在的活動追蹤
你可以在互動和commits之間進行切換通過點擊對應的信息
順帶提一下，這個API通過scheduler這個包使用
import { unstable_trace as trace } from "schedule/tracing" class MyComponent extends Component { handleLoginButtonClick = event => { trace("Login button click", performance.now(), () => { this.setState({ isLoggingIn: true }); }); }; // render ... } 復制代碼更詳細的使用可以看這里
最后
這個功能非常棒，它能夠讓開發者非常直觀的看到他的每次操作帶來的組件渲染消耗，能夠很方便幫助開發者發現一些不必要的渲染。
其實在React開發中一些小細節可能會給整個應用的性能開銷帶來很大的影響，只是現在的瀏覽器太強大以及大部分應用都處於性能過剩的情況下，所以性能問題不是特別明顯。
在原文的最后有一個視頻展示了如何利用Profiler幫助發現性能問題並優化的案例，大家都可以看一下。