Redux / React

时间:2016-07-23 16:12:59

标签: performance reactjs timer redux intervals

我正在开发一个具有多个计时器/秒表的应用程序 - 最多可达400,并且关注应用程序其余部分的性能以及不必要的渲染。

所有计时器都需要使用偏离本地时间(Date.now())的时间戳,并且我希望所有计时器同时递增/递减,每秒一次。

偏移量存储在redux商店中。

解决方案A

最好将主时间戳存储在顶级组件中,并使其可用于每个子组件。然后它将每秒更新一次,如下所示:

currentTimestampFromToplevelComponent = Math.round((Date.now() - globalOffsetFromRedux) / 1000) * 1000 

然后每个组件都能够呈现这个:

elapsedTime = currentTimestampFromToplevelComponent - componentsStartingTimestamp

解决方案B

...或者每个组件有自己的间隔运行每100毫秒,性能会更好,每个组件都会渲染:

elapsedTime = Math.round(Date.now() - globalOffsetFromRedux / 1000) * 1000 - componentsStartingTimestamp

答:每秒一个间隔,但很多属性更新。 B:每100毫秒有很多间隔,但很少有属性更新。

1 个答案:

答案 0 :(得分:0)

它没有显示任何渲染?

从我能理解的内容:

解决方案A:全局elapsedTime作为状态,在此状态发生变化后,React将向下渲染到所有子组件;

解决方案B,每个组件都将自己的elapsedTime作为状态,因此每个组件都会为每个状态更改呈现自己,

我认为减少国家数量总是更好。解决方案A