react性能優化檢測工具-官方出品-React Developer Tools

需求：加載一個頁面，特別複雜的時候會有不少的組件，我想知道每一個組件渲染時間，清楚的定位到底哪一個組件浪費時間多，而後優化。
背景：react的性能優化一直很頭疼，最先作過一個左右聯動的列表頁面，在本地運行沒有任何問題，可是放到RN裏，慘不忍睹，雖然過去了好久，可是記憶深入，在andriod和ios裏都有對應的性能檢測工具，很方便定位問題，在h5端，我經過本身的摸索，找到了一款react的優化檢測工具，react developer tools。
tips: 在react16版本以前，可使用react-addons-perf
import Perf from 'react-addons-perf';
window.Perf = Perf;

安裝：
去谷歌商店https://chrome.google.com/web...， 搜react-developer-tools，而後添加到瀏覽器，就好了
最終看到：

使用：
打開開發者面板

點擊綠色按鈕，錄製

點擊tap頁面後，點擊紅色的錄製按鈕，暫停

點擊面板裏的刷新按鈕能夠檢測重載時的性能
結果以下：
按照嵌套層級的渲染圖表

按照渲染時長的圖表

這樣咱們就知道，每一個組件的渲染時間是多少了，遇到那種消耗時間太長的能夠進一步去優化。

其餘：react-performance-tool