React Redux,将商店连接到1000个微小组件

问题描述 投票:2回答:1

我遇到了反应还原的性能问题,我一直在阅读,而且根据我最终的结果,它“似乎”就像我正在做的那样“正确”。

我有一个生产线跟踪系统的情况,对于每个“项目”,它有12个步骤。我每周都有大约60-100个项目,分为几天,在1个视图中很容易看到。

现在的问题在于,这12个步骤中的每一个都是我使用React Redux Connect功能连接起来的各个组件,它基本上映射了所有不同步骤的平面存储状态,并从中找出了确切的步骤。 store,包含有关何时完成,其状态等的数据,然后将其作为prop传入其中,并使用它进行渲染。

现在,每当我在步骤列表的商店中创建更新时,它显然会重新呈现那些aprox 1000组件,并检查它们是否需要重新呈现,然后只有其中一个,我点击的那个,让说。

但是,循环遍历1000个mapToState函数的整个计算部分需要时间,并且会降低应用程序的速度并使其无法响应。

是否有更智能的方法将组件连接到商店。

作为一个注释,我在写这篇文章之前已经考虑了很久,并且我还试图仅映射每个项目(每组12个步骤),然后让它们基于作为父项的基础上渲染纯组件,使用数据单独执行子组件,但是,我没有得到任何更好的结果。

提前感谢任何能够提供指导或帮助我朝着正确方向前进的人。

文森特拉伊

javascript reactjs react-redux
1个回答
0
投票

我目前正处于这种状况,我也在寻找明确的答案,但我会分享到目前为止我提出的问题:

要使网络应用达到60fps的目标,每帧的每帧预算为16.67毫秒。

如果您有1,000个连接组件,那么每个组件的每个商店更新都会发生一些额外的还原记录(比如运行mapStateToProps),并且要保持16.67ms的帧预算,您需要在0.017ms内完成簿记(或平均17,000ns。

从经验来看,这对我们来说很难实现。

© www.soinside.com 2019 - 2024. All rights reserved.