React性能优化（一）

在最近的工作中我们发现开发一个已经持续开发了一年的React应用在IE11浏览器和一个老旧的安卓设备上工作不是特别流畅，这引起了我们的注意，决定抽出一些精力对代码做一些优化。虽然我们在日常开发中已经有意识的去写高质量、高效率的代码，但是由于开发人员的计算机性能都很好并且经常调试使用的chrome浏览器有一个强大的V8引擎所以性能问题还是经常会被忽略。

在这篇文章里，我会介绍我是如何用React Profile发现问题，并分析解决问题的。

分析工具

性能问题通常是在手动测试或调试时直观感受到的，例如做某些操作时应用出现卡顿或是移动设备发热的情况。但是在这种情况下不太容找到问题到底出在哪些组件中，很多时候新添加的代码并不一定是问题的原因有可能只是个诱因。这时分析工具就非常有用了，可以帮助我们定位问题点。在这篇文章我用React+Redux的Todos例子作为演示代码。

React DevTools

这应该是每个React开发者必备工具了，如果你还没有，赶紧装一个吧。

Highlight Updates

这是DevTools里提供的一个功能，在我们操作React App时可以高亮重新渲染的组件。

打开高亮功能

  

使用

打开之后当操作App时重新渲染的组件会有一个高亮的边框，边框为蓝色时说明渲染时间短，黄色说明时间有点长，如果时间很长会是红色就要注意了。这个工具会给我们一个直观的显示哪些组件更新了。

 

React Profiler

这个工具包含在React DevTools中，适用于react 16.5及之后版本。如果你的项目版本合适，会在DevTools里看到Profiler页。

 

分析问题

使用工具

点Profiler右上角的圆形按钮开始记录分析数据，然后在todos上添加3个新的todo项，完成操作之后再点圆形按钮结束录制。

从App上可以看到，每当添加新的todo项时，整个todo列表和每一个todo项都重新渲染了。 

然后看看Profiler中的数据。

React渲染组件主要分两个阶段：渲染（Render）和提交（commit）。渲染阶段react执行组件中的render方法得到渲染结果也就是虚拟DOM，然后和上一次渲染的结果比较找出差异。提交阶段，react会添加、更新或删除真实DOM，把虚拟DOM中的内容渲染到页面中。

右上角的1/3表示在录制过程中一共有3次提交，图中的每一个小条代表一次提交，黑色的是当前选中的提交，点击不同的条可以选择不同的提交。小条的高度和颜色反应了提交执行的时间，黄色高的条比蓝色条用的时间长。

这部分是火焰图