Javascript 限制组件中的React render调用？

我有一个内置Flux/React的UI，它模仿操作系统windows系统。用户可以移动、最小化和调整窗口大小，也可以在窗口之间拖放图标。我有一个主桌面组件，它轮询LayoutStore并基于布局数据构建子级

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

我想到的是在LayoutStore中为每个较大的组件（如窗口）保留一个dirty或stateVersion变量，并将其传递到props中，以便每个组件可以快速检查是否受到影响，而不必担心状态表示的复杂性没有深入的比较，不可变的副本，还有，我更喜欢第二种方式，因为每次我弄乱组件的属性时，我都可以直接碰撞组件的状态版本，并且在发出更改后不需要在存储区中取消设置脏版本

---

因为我是一个非常新的反应者——考虑到我的限制，这是一种明智的方法还是有更好的标准解决方案？

您可以检查生命周期方法shouldComponentUpdate中的更改，而不是自己将脏变量保持在状态。此外，React速度非常快，很可能您的瓶颈将来自于rerender以外的其他原因。我确实计划执行Checkin shouldComponentUpdate方法，唯一的黑客攻击是使用附加属性，如“没有真正更改”或“有一些更改-请重新渲染您的子树”。我知道react很快，为什么会这样，但它仍然必须运行我的“render”方法中的所有东西，事实证明这有点瓶颈-我也会研究优化代码，但放弃调用render看起来像是一个最低限度的结果。OTOH，阅读后，我开始相信，在树结构中维护脏标志与对节点数据使用不可变项相比没有什么优势。@konrad我和你做了完全相同的事情：我的模型上有一个“修订”属性，每次更新时都会碰到它。可能不是react方式，但它比处理不可变项更简单，而且它仍然是检测shouldComponentUpdate中更改的一种非常快速的方法。到目前为止，在我的用例中还没有发现任何缺点。@Simon很高兴听到它适合您。它似乎可以与很多同级（例如表视图）一起工作，但是如果您有一个树结构，则需要将版本更改传播到根目录，否则子组件将永远不会更新。然后，您可能会有多个组件正在侦听的存储—这一切都会使版本控制比开始时预期的更复杂，并且简单性优势也随之消失。