javascript - React + Redux 性能优化与 componentShouldUpdate

Question

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

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

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

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

我的问题:

如果整个商店通过所有组件传递，是否有一种智能方法来防止组件更新，或者我是否需要为每个组件定制一个 shouldComponentUpdate 方法，基于它的 Prop (及其 child )实际使用？

Answer 1

你真的不想那样做。首先，据我了解，Immutable 的 toJS() 相当昂贵。如果您每次都针对整个州执行此操作，那将无济于事。

其次，立即调用 toJS() 几乎浪费了最初使用 Immutable.js 类型的全部好处。在呈现函数之前，您确实希望将数据保持为不可变包装形式，这样您就可以从 shouldComponentUpdate 中的快速引用检查中获益。

第三，完全自上而下地做事通常会导致很多不必要的重新渲染。如果您将 shouldComponentUpdate 应用于组件树中的几乎所有内容，您可以解决这个问题，但这似乎过分了。

推荐的 Redux 模式是在组件树的不同级别的多个组件上使用 connect()，视情况而定。这将在多个层面上简化正在完成的工作量。

您可能想通读我在 React and Redux Performance 上收集的一些文章.特别是最近关于 "High Performance Redux" 的幻灯片非常好。

更新:

在 Reactiflux 的#redux channel 中，在 Reactiflux 的#redux channel 中，我与另一位 Redux 用户就自上而下与多连接进行了很好的辩论。我已经复制了该讨论并将其粘贴到要点中:top-down single connect vs multiple lower connects .

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