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

【问题标题】：React/Flux efficiency: how to prevent an action from triggering multiple renders of a component?React/Flux 效率：如何防止一个动作触发一个组件的多次渲染？
【发布时间】：2015-10-16 08:19:44
【问题描述】：

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

一个 Action 可以导致多个 Store 发出“更改”事件
一个ControllerView可以订阅多个Store的“change”事件

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

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

【问题讨论】：

你为什么要关心它是否多次渲染？是因为您想要更好的性能，还是因为其中一个渲染会使组件处于不一致的状态？
@GJK 因为状态不一致

标签： reactjs reactjs-flux

【解决方案1】：

一般来说，您应该只允许它多次渲染。但是，如果操作总是在两个商店中触发操作，您可以使用"waitFor()" method of the dispatcher 让一个商店首先更新，然后仅在第二个商店更新时发出更改。

这仅在操作将始终影响两个商店时才有用。

【讨论】：

感谢您的回答，但使用 waitFor 仍然会有两个不同的“更改”事件和两个不同的渲染周期，不是吗？实际上，我认为使用它可以防止进行第二次渲染，但前提是您还编写了一个能够理解状态实际上并没有改变的 shouldComponentUpdate() 函数，但这并不是那么明显。你有没有引用“你应该只允许它多次渲染”？这会让我感兴趣。
嗯，通过一些研究，我实际上找不到任何明确说明您应该允许它渲染两次的内容。我认为一种解决方案可能是创建两个嵌套在 ControllerView 中的视图，每个视图只监听其中一个商店的数据。不过，仍然会有两个渲染。

【解决方案2】：

flux 模式的最佳实践是限制有状态组件的数量，并尝试只让顶级组件监听存储，并在 props 中发送所有相关信息。

对于多个商店，一种解决方案可以在一次更改后最小化多次渲染：

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

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

【讨论】：

感谢您的回答，但这看起来与 Flux 的工作方式大相径庭......
答案的哪一部分会偏离 Flux？他们自己的教程（聊天）以类似的方式工作。额外的 StatStore 不会偏离通量。在我看来，这样的商店是一个很好且干净的解决方案，可以 a) 跟踪商店监听调度和 b) 防止循环 waitFor 循环。
Facebook 聊天组件监听两个存储：componentDidMount: function() { this._scrollToBottom(); MessageStore.addChangeListener(this._onChange); ThreadStore.addChangeListener(this._onChange); }
那么您认为答案的哪一部分违反了通量模式？
第 1 步，“创建一个不存储任何内容的 StatStore，...”。无论如何，如果它对您有用，我不会反对这个解决方案。这不是我想要的——从那以后我们切换到了 Redux，所以很明显我不再关心“通量纯度”了。

【解决方案3】：

我会添加这个以供将来参考：我没有找到任何好的解决这个问题的香草通量，最后切换到Redux，它具有通量的所有优点并且不会受到影响这个缺点。

【讨论】：