React性能分析利器来了，妈妈不再用担忧个人React应用慢了

Profiler

React16.5正式在devtool中加入了Profiler功能，用于收集每次变动致使的渲染时间，帮助开发者发现潜在的性能问题，有助于开发更高性能的React应用

官方博客

如何使用

在Chrome的开发工具插件react devtool中多了一个Profiler的tab，点击能够切换到Profiler界面

在你使用React16.5以后的版本中，开发时默认开启Profiler功能，要想在正是环境也使用这个功能，能够看这里

默认打开Profiler什么都没有，要点击录制按钮进行记录（跟chrome的performance挺像）。

在你开始录制以后你能够进行一些你想分析的操做，而后再点击stop来中止录制，就能够获得录制的内容

录制内容分析

首先要了解一点，React在16版本以后处理任务分为两个阶段：

1. render阶段判断哪些变动须要被处理成DOM，也就是比较上一次渲染的结果和新的更新
2. commit阶段React最终达成全部变动（也就是从js对象到DOM的更新），而且会调用componentDidMount和componentDidUpdate这些生命周期方法

开发工具中经过commit阶段对性能数据进行编组，会显示在右侧工具栏上

看上去像一个柱状图，每个柱子表明一次commit，他的颜色和高度对应执行时长，越高颜色越黄表明时间越长，反之越短。

删选commits

能够经过commits分组左边的设置图标点击出现的对话框设置删选选项，能够设置：

1. 执行时间少于多少的不展现
2. 是否显示原声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帮助发现性能问题并优化的案例，你们均可以看一下。

我是Jocky，一个专一于React技巧和深度分析的前端工程师，React绝对是一个越深刻学习，越能让你以为他的设计精巧，思想超前的框架。关注我获取最新的React动态，以及最深度的React学习。更多的文章看这里