使用componentShouldUpdate进行React + Redux性能优化 [英] React + Redux performance optimization with componentShouldUpdate

问题描述

我有一个react / redux应用程序已经变得足够大，需要进行一些性能优化。

I have a react/redux application which has become large enough to need some performance optimizations.

大约有100个独特的组件通过websocket事件更新。当发生许多事件（比如〜5 /秒）时，浏览器开始显着减慢。

There are approx ~100 unique components which are updated via websocket events. When many events occur (say ~5/second) the browser starts to slow down significantly.

大多数状态作为Immutable.js对象保存在redux存储中。整个商店转换为普通的JS对象，并作为道具通过组件树向下传递。

Most of the state is kept in a redux store as Immutable.js objects. The entire store is converted to a plain JS object and passed down as props through the component tree.

问题是当一个字段更新时，整个树都会更新，我相信这是最有改进空间的地方。

The problem is when one field updates, the entire tree updates and I believe this is where there is most room for improvement.

我的问题：

如果整个商店通过所有组件，是否有一种智能的方法来防止组件更新，或者我是否需要为每个组件定制一个自定义的 shouldComponentUpdate 方法，基于它（及其子组件）实际使用的道具？

If the entire store is passed through all components, is there an intelligent way to prevent components updating, or do I need a custom shouldComponentUpdate method for each component, based on which props it (and its children) actually use?

推荐答案

你真的不想那样做。首先，据我所知，Immutable的 toJS（）相当昂贵。如果你每次都为整个州做这件事，那就没有用了。

You really don't want to do things that way. First, as I understand it, Immutable's toJS() is fairly expensive. If you're doing that for the entire state every time, that's not going to help.

第二，打电话给 toJS（）马上浪费了几乎所有使用Immutable.js类型的好处。你真的希望将你的数据保持在Immutable-wrapped形式，直到你的渲染函数，这样你就可以在 shouldComponentUpdate 中获得快速参考检查的好处。

Second, calling toJS() right away wastes almost the entire benefit of using Immutable.js types in the first place. You really would want to keep your data in Immutable-wrapped form down until your render functions, so that you get the benefit of the fast reference checks in shouldComponentUpdate.

第三，完全自上而下做事通常会导致大量不必要的重新渲染。如果您在组件树中的所有内容上粘贴 shouldComponentUpdate ，那么可以解决这个问题，但这似乎过多了。

Third, doing things entirely top-down generally causes a lot of unnecessary re-rendering. You can get around that if you stick shouldComponentUpdate on just about everything in your component tree, but that seems excessive.

Redux的推荐模式是在组件树中不同级别的多个组件上使用 connect（） ， 作为适当的。这将在几个层面上简化完成的工作量。

The recommended pattern for Redux is to use connect() on multiple components, at various levels in your component tree, as appropriate. That will simplify the amount of work being done, on several levels.

您可能想要阅读我收集的一些文章 React和Redux Performance 。特别是，最近在高性能Redux上的幻灯片非常棒。

You might want to read through some of the articles I've gathered on React and Redux Performance. In particular, the recent slideshow on "High Performance Redux" is excellent.

更新：

我在此前几天与另一位Redux用户进行了很好的辩论问题在Reactiflux的#redux频道中被问到，自上而下与多个连接。我已经复制了这个讨论并将其粘贴在一个要点中：自上而下的单连接与多个下连接。

I had a good debate with another Redux user a couple days before this question was asked, over in Reactiflux's #redux channel, on top-down vs multiple connections. I've copied that discussion and pasted it in a gist: top-down single connect vs multiple lower connects.

此外，昨天发布的文章很方便地涵盖了过度使用Immutable.js的 toJS（）功能： https://medium.com/@AlexFaunt/immutablejs-值得最价格66391b8742d4 。写得非常好的文章。

Also, yesterday there was an article posted that conveniently covers exactly this topic of overuse of Immutable.js's toJS() function: https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4. Very well-written article.

这篇关于使用componentShouldUpdate进行React + Redux性能优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！