React性能优化工具：让你的app快到飞起来

通常来讲，React已经很快了，但是呢它也常常会有一些小错误会导致性能方面的问题。慢速组件安装，深层组件树和不必要的渲染循环都可能导致你的app变得很慢。

呐，天无绝人之路，有很多工具包括React中内置的工具都可以帮助解决性能方面的问题。在这篇文章中，我会为大家介绍几款工具和技术。每个部分还有一个互动的，（我希望是）有趣的演示！

工具＃1：性能时间表

React 15.4.0引入了一个新的性能时间轴功能，可以让你准确了解组件的挂载，更新和卸载。它还可以让你可视化相关的组件生命周期。

注意：现在，此功能仅适用于Chrome，Edge和IE，因为它利用了尚未在所有浏览器中实施的User Timing API。

怎么运行的

理解输出

每个彩色条显示组件正在做“运行”的时间。由于JavaScript是单线程的，每当组件正在加载或呈现时，它会阻止主线程，并阻止其他代码运行。

括号中的文字[update]描述了组件生命周期的哪个部分正在发生。时间轴会分解每一步，因此你可以在[componentDidMount] [componentWillReceiveProps] [ctor]（构造函数）和（）方法上看到细粒度的时序[render].

堆叠的条表示组件树。虽然在React中具有相当深的组件树是一件很典型的事情，但如果要优化经常安装的组件，则可以帮助减少包装器组件的数量，因为每个组件都会增加小的性能和内存损失。

这里需要注意的一点是，时间表中的timeline是用于开发构建“React”的，它比产品慢得多。事实上，性能时间表本身就会减慢你的应用程序。虽然这些数字不能代表真实时间，但是不同组件之间的相对定时是准确的。此外，组件是否更新完全不依赖于prod构建。

为了让你能够操作一下，我操纵了TodoMVC应用程序，出现了一些严重的性能问题。你可以在这里尝试一下。

要查看timeline，请打开Chrome开发工具，转到“Performance”选项卡，然后单击记录。然后在应用程序中添加一些TODO，停止录制并检查时间轴。看看是否可以发现哪些组件导致性能问题:)

影响React中性能的最常见问题之一是不必要的渲染循环。默认情况下，React组件将在父级呈现时重新呈现，即使他们的props没有改变。

例如，我有一个这样的简单组件：

class DumbComponent extends Component {
  render() {
    return <div> {this.props.value} </div>;
  }
}

使用父组件：

class Parent extends Component {
 render() {
  return <div>
   <DumbComponent value={3} />
  </div>;
 }
}

无论何时父组件呈现，DumbComponent将重新呈现，尽管其props没有更改。

通常，如果render运行，并且没有对虚拟DOM的更改，那么这是一个浪费的渲染循环，因为该render方法应该是纯的，并且没有任何副作用。在一个大规模的React应用程序中，检测发生这种情况的地方可能很棘手，但幸运的是，有一个可以帮助的工具！

why-did-you-update是一个库，它挂钩到React并可以检测到潜在不必要的组件渲染。它检测组件的render方法何时被调用，尽管它的props没有改变。

建立

1.安装npm： npm i --save-dev why-did-you-update

2.在你的应用程式中的任何位置新增这个片段：

更多请详见这里：http://www.igeekbar.com/igeekbar/post/262.htm

原文链接：https://www.f2er.com/react/303459.html