本文分为两个部分
1如何分析React性能1.1性能分析指标有哪些1.性能分析的两个阶段1.3通过工具查看指标和度量16个React性能优化方法.1前端通用优化.减少不必要的组件更新.3提交阶段优化1性能分析进行任何性能优化的首先你要知道有哪些衡量的指标？其次找出存在的问题？然后才能针对性地进行优化。
1.1性能分析指标有哪些定性：加载性能、运行性能：滚动更新
定量：
加载性能指标：reponseStart、domInteractive、DomContentLoadedEventEnd、loadEventStart、FCPFSPFMPTTI
运行性能指标：FPS、内存CPUI/O网络磁盘
治理：采集、运维
1.性能分析的两个阶段分析阶段通过分析器(Profiler)找出重新渲染的组件、重新渲染的次数、以及重新渲染耗费的资源与时间
变动检测，通过分析器我们可以知道：什么被重新渲染？重新渲染的代价？变动检测要回答的问题就是：为什么这些进行了重新渲染？
优化阶段优化阶段我们针对分析阶段抛出的问题进行解决，下面简单列举下React进行渲染性能优化的三个方向：
1、前端通用优化。这类优化在所有前端框架中都存在，重点就在于如何将这些技巧应用在React组件中。
、减少不必要的组件更新。这类优化是在组件状态发生变更后，通过减少不必要的组件更新来实现，对应到React中就是：减少渲染的节点、降低组件渲染的复杂度、充分利用缓存避免重新渲染（利用缓存可以考虑使用PureComponent、React.memo、hook函数useCallback、useMemo等方法）
3提交阶段优化。这类优化的目的是减少提交阶段耗时。
1.3通过工具查看指标和度量1、ReactDevToolsReduxDevToolsReactv16.5引入了新的Profiler功能，让分析组件渲染过程变得更加简单，而且可以很直观地查看哪些组件被渲染.
高亮更新首先最简单也是最方便的判断组件是否被重新渲染的方式是“高亮更新(HightlightUpdates)”，通过高亮更新，基本上可以确定哪些组件被重新渲染。
设置方式如下：
例如合理使用了React.memo的列表组件比不使用，性能更好，“纯组件”是React优化的第一张牌,也是最有效的一张牌。
分析器如果高亮更新无法满足你的需求，比如你需要知道具体哪些组件被渲染、渲染消耗多少时间、进行了多少次的提交(渲染)等等,这时候就需要用到分析器了.
来了解一下Profiler面板的基本结构：
1、