如何提高你的 React 应用的性能

2017-12-03 本文已影响0人赵赵zhy

如何提高你的 React 应用的性能

（How to greatly improve your React app performance）- Noam Elboim / from medium

本文旨在总结常见的性能缺陷，以及如何来避免这些缺陷。

性能问题在web应用开发中不是什么新鲜事。

我们每个人都有这样的时刻，当你把一个新的Component组件放到你的app中，你会突然发现你尝试的每一个用户交互动作都与期望的效果有很明显的滞后。有时，你可以重复使用多个同样的组件，这种尴尬的动效滞后会更加明显。像下面这样：

在那一刻你也许心里已经给写这个组件的人起了好几个绰号了。但是最好的办法是：做些什么，是的，你可以的！

我们将重点解决以下几个常见的 React 性能问题：

1.错误的 shouldComponentUpdate 实现，为什么 PureComponent 没能拯救你。

2.太快的改变 DOM。

3.滥用事件（events）和回调（callbacks）。

对于以上的每个问题，我们先解释问题的根源，然后我们提出一些简单易用的方法来避免它。

管好你的 shouldComponentUpdate

组件的component 钩子函数 shouldComponentUpdate 的本意是用来阻止一些非必需的渲染（render）, shouldComponentUpdate将即将更新的props和state作为参数，如果返回值是true, render函数就执行，否则不执行 render.

React.Component 默认的实现 shouldComponentUpdate 是返回true.

越多的render渲染意味着耗费越多的时间。所以我们需要防止不必要的更新来减少额外的时间。

为此，你会想到我们应该在实现 shouldComponentUpdate 的时候更谨慎些。

问题

让我们看一个简单的使用 shouldComponentUpdate 的例子：

Simple shallow implementation: 'this.props.children !== nextProps.children', but it's always returning true

code

等下，为什么不起作用呢？

不起作用是因为 React 每次渲染的时候创建了一个新的 ReactElement!

这就意味着在 shouldComponentUpdate函数中 Shallow Comparision 如：return this.props.children !== nextProps.children;几乎就相当于return true;

根据我的经验，大多数组件通常都以某种方式支持 ReactElement props（PropTypes.node or PropTyps.elemtn）比如像children这是很常见的情况。

那么， PureComonent又是怎样的呢？

React.PureComponent 是React.Component 的另外一种方式。它不是总在其 shouldComponent 实现中返回true,而是 props 和 state 的浅层比较。

使用 PureComponent 会返回同样的结果，如下：

PureComponent component is still always returning true

这是 PureComponent 特性的bug吗？我不确定。我们需要知道的是，PureComponent 在大多数情况下不起作用，它并不能阻止一些不必要的更新。

可能的解决方案

我们第一点想到的是——进行深度比较！这确实管用，但是它有两个重要缺陷：

1. 运行深度比较本身是一个过程比较长，比较重，比较耗时的动作。因此，在 shouldComponent 函数运行结束之后，render 函数才能运行。这样一来性能非但不能提升反而会变得更差。

2. 这只是基于当前的 React Elements 实现，在未来版本中可能会取消。

综上，在我看来，使用深度比较并不是一个好的解决办法。

为了寻找到更好的解决方案，我研究了一些其他的虚拟 DOM 库，看看他们是怎么解决这个问题的。

我发现了 Vue 作者Evan You 一个关于在Vue.js中添加类React shouldeComponent 的 feature request 发表的一个有意思的评论。他解释到，这个问题并不能通过 "diffing" 虚拟DOM解决，因为它有很多未知的问题。依赖 React Elements 来检测组件中的状态变化并不是一个可行的解决方案。

在实际应用中，不应该在 shouldComponentUpdate 的实现中使用 React Elements 的比较作为返回结果。相反，应该使用某种状态的改变来告诉组件是否应该更新。

我们应该基于prop的不同来通知 state 的改变，而不是通过使用this.props.children !== nextProps.children。最好是一个数字或者字符串，这样比较会更快。

我们甚至可以使用一个新的 prop 专门用来通知组件是否应该更新。

更进一步，我和我的同事创建了一个高阶组件（HOC）。这个组件使用继承反转(Inheritance Inversion)来扩展通用的 shouldComponent 实现，也是 PureComponent 的替代方案。而且确实有效。代码在这里：

https://github.com/NoamELB/shouldComponentUpdate-Children

必须说明的是，这只是一个通用的实现，所以并不是适用所有的情况。具体可以参考这里

例子在这里，使用了一个自定义的 shouldComponentUpdate 实现。正如上面提到的，它确实不会再进行不必要的渲染了。