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;react

安装：
去谷歌商店https://chrome.google.com/web...， 搜react-developer-tools，而后添加到浏览器，就好了
最终看到：

使用：
打开开发者面板

点击绿色按钮，录制

点击tap页面后，点击红色的录制按钮，暂停

点击面板里的刷新按钮能够检测重载时的性能
结果以下：
按照嵌套层级的渲染图表

按照渲染时长的图表
ios

这样咱们就知道，每一个组件的渲染时间是多少了，遇到那种消耗时间太长的能够进一步去优化。web

其余：react-performance-toolchrome