pat*_*ood 4 javascript performance reactjs redux
我有一个react/redux应用程序,它已经变得足够大,需要进行一些性能优化.
大约有100个独特的组件通过websocket事件更新.当发生许多事件(比如~5 /秒)时,浏览器开始显着减速.
大多数状态都作为Immutable.js对象保存在redux存储中.整个商店转换为普通的JS对象,并作为道具传递到组件树中.
问题是当一个字段更新时,整个树都会更新,我相信这是最有改进空间的地方.
我的问题:
如果整个商店通过所有组件,是否有一种智能的方法来防止组件更新,或者我是否需要shouldComponentUpdate为每个组件定制一个自定义方法,基于它(及其子组件)实际使用的道具？
mar*_*son 11
你真的不想那样做.首先,据我所知,Immutable的toJS()价格相当昂贵.如果你每次都为整个州做这件事,那就无济于事了.
其次,立即调用toJS()几乎浪费了使用Immutable.js类型的全部好处.你真的希望将你的数据保持在Immutable-wrapped形式,直到你的渲染函数,这样你就可以获得快速参考检查的好处shouldComponentUpdate.
第三,完全自上而下做事通常会导致大量不必要的重新渲染.如果你坚持组件树中的所有东西,你可以解决这个问题shouldComponentUpdate,但这似乎过分了.
Redux的推荐模式是connect()在组件树中的多个组件上使用,视情况而定.这将在几个层面上简化完成的工作量.
您可能想要阅读我在React和Redux Performance上收集的一些文章.特别是,最近关于"高性能Redux"的幻灯片非常出色.
更新:
在Reactiflux的#redux频道中,在问题提出前几天,我与另一个Redux用户进行了很好的辩论,自上而下与多个连接.我已经复制了这个讨论并将其粘贴在一个要点中:自上而下的单连接与多个下连接.
此外,昨天有一篇文章张贴方便占地面积Immutable.js的过度使用的正是这个话题toJS()功能:https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4.写得很好的文章.
| 归档时间： |
|
| 查看次数： |
2737 次 |
| 最近记录： |