React Profiler Chrome Tool

簡單記錄下chrome的react工具，Profiler如何使用

1.首先很少說，你須要安裝一個react的chrome的插件.

在許久以前，只有一個Element....
2.

跟Chrome自帶的performace很像是吧，點擊錄製按鈕就能夠開始監聽，而後開始操做你想監聽的react組件.

3.點擊錄製結束後，能夠看到具體的信息
  

 

關於commit，官網給出的

• The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like componentDidMount and componentDidUpdate during this phase.
  我的理解爲，任何的state變更和 componentDidMount， componentDidUpdate這2個生命週期函數都算爲commit每個commit都是獨立計算分析。
• 柱狀圖的長短顯示了每一個commit的用時
  
  
  

4.

火焰圖視圖表示特定提交的應用程序的狀態。圖中的每一個條表示一個React組件(Row, Card....)。

條的大小和顏色表示渲染組件及其子組件所需的時間。(條形圖的寬度表示組件上次呈現時所花費的時間，顏色表示做爲當前提交的一部分所花費的時間。)
這種藍綠色的條表示其做爲組件在父類組件執行了多久
5

單擊任何一個橫條能夠顯示這個組件內的props和states
6

 

 

能夠更換你喜歡的查看方式，圖上顯示了渲染時間最長的在最上面.（頂部的組件可能包含其下面顯示的子組件）


最後一個

能夠監控請求數據的大小和時間，須要額外在代碼中安裝一個組件
https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16
有興趣的能夠試試

7 若是點擊柱狀圖顯示

 

你能夠切換回elements選項換一個root節點查看