React + Redux与组件的性能优化更新

Question

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

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

大部分状态都保存在Redux存储中作为Immutable.js对象。整个商店被转换为一个普通的JS对象，并通过组件树以道具形式传递。

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

我的问题：

如果整个商店通过所有分量通过，是有防止部件更新一种智能的方式，或者我需要一个定制shouldComponentUpdate方法为每个组件，在此基础上道具呢（和其子女）实际使用？

Answer 1

你真的不想这样做。首先，据我了解，Immutable的toJS()相当昂贵。如果你每次都为整个状态做这件事，那不会有帮助。

其次，立即调用toJS()首先浪费了几乎所有使用Immutable.js类型的好处。你真的想保持你的数据在Immutable-wrapped形式下，直到你的渲染函数，这样你就可以从shouldComponentUpdate中获得快速引用检查的好处。

第三，完全自上而下的处理通常会导致大量不必要的重新渲染。你可以解决，如果你坚持shouldComponentUpdate几乎在你的组件树的一切，但似乎过度。

适用于Redux的推荐模式是在组件树中的各个级别上使用connect()。这将在几个层面上简化正在完成的工作量。

您可能需要阅读我在React and Redux Performance上收集的一些文章。特别是最近在"High Performance Redux"上的幻灯片非常棒。

更新：

我在Reactiflux的#redux通道与另一个终极版用户前几天有人问这个问题一个很好的辩论，过去，自上而下VS多个连接。我已经复制了该讨论并将其粘贴在要点中：top-down single connect vs multiple lower connects。

此外，昨天发布了一篇文章，其中正确涵盖了Immutable.js的toJS()函数的过度使用这一主题：https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4。写得很好的文章。