限制React渲染组件中的调用?

时间:2015-09-24 09:05:43

标签: javascript reactjs reactjs-flux flux

我有一个内置Flux / React的UI,模仿OS Windows系统。用户可以移动,最小化和调整窗口大小,还可以在窗口之间拖放图标。我有主要的桌面组件,它轮询LayoutStore并根据布局数据构建子项。

然而,事实证明,使用更多元素重新渲染虚拟DOM树需要花费足够长的时间来损害应用程序响应性,这有时会对过渡动画造成不利影响。我已经放弃了以60fps更新状态 - 我只是在用户删除元素后更新布局存储。我正在考虑限制render调用的方法,因为我知道布局的大多数更改都会非常有选择地影响子组件 - 给定的布局状态更改很可能会影响多个特定组件。

我想到的是在LayoutStore中为每个较大的组件(即窗口)保留一个dirtystateVersion变量并将其传递给props,以便每个组件都可以检查它是否受到影响快速而不用担心状态表示的复杂性(没有深度比较,不可变复制等等)另外我更喜欢第二种方式,因为每次我弄乱它的属性时我都可以碰到组件stateVersion并且#&# 39;在发出dirty后,需要在商店中取消change

因为我对React很陌生 - 考虑到我的限制或是否有更好的标准解决方案,这是一种理智的方法吗?

0 个答案:

没有答案