React+Redux性能优化与组件ShouldUpdate

React + Redux performance optimization with componentShouldUpdate

本文关键字：组件 ShouldUpdate 优化性能 React+Redux 更新时间：2023-09-26

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

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

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

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

我的问题：

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

你真的不想那样做。首先，据我所知，Immutable的toJS()相当昂贵。如果你每次都在全州范围内这样做，那是无济于事的。

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

第三，完全自上而下地做事通常会导致大量不必要的重新渲染。如果您在组件树中的几乎所有内容上都使用shouldComponentUpdate，则可以绕过这一点，但这似乎太过分了。

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

你可能想通读我收集的关于React和Redux Performance的一些文章。特别是，最近关于"高性能Redux"的幻灯片非常棒。

更新：

几天前，在Reactiveflux的#Redux频道上，我与另一位Redux用户就自上而下与多个连接的问题进行了激烈的辩论。我已经复制了这个讨论，并将其粘贴在一个要点中：自上而下的单连接与多个较低连接。

此外，昨天发布的一篇文章正好涵盖了过度使用Immutable.js的toJS()函数的主题：https://medium.com/@AlexFaunt/免疫性js-或价格-66391b8742d4。写得很好的文章。