React 性能优化：React DevTool & Chrome DevTool

2021年08月14日 00:19 · 阅读 1337

如何借助工具来发现性能问题，对 React 进行调优？

在日常的开发中，我们主要借助两个工具：

React DevTool

React DevTool，是由 FaceBook 提供的一个 Chrome 插件，通过它不仅能在开发时观察到整个应用的状态，还可以进行性能调优。最主要的调优方式是可以帮助我们找到多余的渲染。

首先，我们要安装一下 React DevTool，安装完毕后可以在浏览器的右上角看到它（或者被收纳了起来）如下图 1，如果你打开的网站用到了 React ，你会看到插件的图标被点亮如下图 2。

在你的 React 项目页面切换到 Components Tab，点开右上角的 setting icon，勾选上“Highlight updates when components render.”。

这个功能可以让你在操作页面时，展示哪些组件发生了更新（高亮），就像下面这样：

我们看到在简单操作 Counter 组件的加减时，侧边面板也发生了重新渲染，这显然是有问题的。

这时，我们就可以来到项目代码中检查一下，原来是在 SidePanel 中依赖了 counter 的状态。

// ...
const mapStateToProps = function (state) {
  return {
    router: state.router,
    examples: state.examples,
  };
};
// ...
复制代码

检查相关代码，发现内部并没有用到 examples 的地方，所以我们直接删掉他。优化之后，+/- 的点击只引起 Counter 组件的刷新，我们认为是 ok 的。

如果 SidePanel 的内部确实用到 example 中的一个字段，那么建议只绑定该字段而不是整个 example，也可以避免大量不必要的重新渲染。

Chrome DevTools，即 Chrome 开发者工具，是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。

依旧是在 Counter 页面，我们切换到 Performance 面板，它可以对我们在页面上的操作进行一顿性能上数据的收集，帮助我们定位性能瓶颈。

为了测试性能瓶颈，我们可以对 CPU 进行降速（6x slowdown），然后点击开始记录按钮，当记录开始再点击 Counter +/- 操作，操作完成后点击结束按钮（stop）。

在 summary 里看到 React 花了大部分时间在 diff 的计算上（scripting），在 rending 和 painting 上倒是没花多少事件。

如果想看某一块的资源花费，可以把鼠标悬浮在上方后滚轮滚动进行缩放。可以看到 SidePanel 上的更新的内容，Route、Link...

通过 Performance，就可以找到性能优化空间大的组件或者是函数了。