React / Flux效率：如何防止动作触发组件的多次渲染？

Question

我还在研究Flux架构，并注意到：

• 一个动作可能导致多个商店发出“更改”事件
• 一个ControllerView可以订阅多个商店的“更改”事件

因此，如果ControllerView依赖于两个商店的数据，并且这两个商店都被一个Action更改，那么ContollerView及其所有组件将被渲染（到虚拟DOM）两次，第一次使用不完整的数据

是否有任何公认的模式可以避免这种情况？我可以想到一些简单的解决方案，但我不想重新发明轮子。

Answer 1

通常，您应该只允许它渲染多次。但是，如果操作始终在两个存储中触发操作，则可以使用"waitFor()" method of the dispatcher让一个存储更新，然后仅在第二个存储更新时发出更改。

只有当操作总是会影响两个商店时，这才有用。

Answer 2

流量模式的最佳做法是限制有状态组件的数量，并尝试让顶级组件监听商店，并在道具中发送所有相关信息。

使用多个商店，一个解决方案可以在一次更改后最小化多个呈现：

• 创建一个不存储任何内容的StatStore，但会侦听所有相关的操作，并等待所有其他相关商店。
• 此StatStore具有从其他商店收集（并可能计算统计数据）的getter函数
• 您的顶级组件仅侦听StatStore更改排放
• 顶级组件然后从StatStore获取数据。

这样，一次更改只会导致一次重新渲染。

Answer 3

我将此添加以供将来参考：我没有找到任何有关vanilla Flux此问题的解决方案，并最终切换到Redux，它具有Flux的所有优点并没有遭受这种不利。