Flux商店发出特定反应成分而非所有成分的变化。

Question

苦苦寻找或想出一个优雅的答案：

如果我有多个动态响应组件正在侦听一个磁通存储以更新其子组件，是否可以对特定组件发出更改，而不是对注册为侦听该存储上的更改的所有组件发出更改？

EG：动态组件有一个按钮，当点击它时，它告诉flux store将一些数据发送到API。 动态组件将根据flux存储器发出的响应和更改来更新其子视图。 但由于所有动态组件都在监听商店，因此他们都会更新他们的子视图，这是不受欢迎的行为。 理想情况下，通量存储可以识别发出更改的组件，或者组件可以识别该更改不适合它们。

这可能吗？ 还是它违背了通量原则？

Answer 1

它不违反通量原则，但要注意不要只有一个大商店，有时最好分成几个小商店。 但我想我理解你的用例，一个包含类似对象集合的商店（如主干集合）。

因此，假设您的商店收到一个新对象或一个新对象数组（或商店中要更新的内容），您有一个注册功能，可以将此对象（或更新）添加到您的商店。 确定这个对象有一个id字段（或类似的东西）。 然后，对于您刚收到的数组的每个新对象，您将发出id。

并且您的视图被绑定为他们的id作为更改事件。 基本上你像数组一样使用你的商店，当数组发生变化时，你将键作为事件发出。 您的视图会听取此密钥/ ID，然后仍然使用此ID /密钥从您的商店获取特定数据。

希望很清楚，让我知道。

Answer 2

我不知道它是否违反了磁通体系结构，但它似乎没有利用它的一些美感。

简单发出更改（没有更改细节）的美妙之处在于商店不需要具有关于视图的明确知识，而且，使用React Virtual Dom框架，它不应该花费太多性能。

要进一步优化性能，可以在React视图上实现shouldComponentUpdate（基于它自身属性的差异），以避免触发tree-diff算法。

请参阅： https ： //facebook.github.io/react/docs/component-specs.html

==添加更多信息==在更传统的MVC中，模型将对特定来源和特定细节发出更改，例如

this.emit({
    details: { x: 'x', y: 'y' },
    source: objectA
)};

接收到它的视图（或控制器）需要这样的细节来更新它的Dom，你将调用update(changes.details)而不是初始的render()方法，因为Dom操作很昂贵。

ReactJS通过使用另一个虚拟Dom层来解决这个问题，它使用纯Javascript来计算Dom操作中的“最佳”差异，所以在React中，你永远不会有方法调用update() ，你总是会调用render()视图的当前状态，React会为您进行优化。

因此，使用Flux和React，你的商店可以在没有任何细节的情况下发出变化，并且听取它的视图可以通过“最佳”Dom操作进行渲染（因此如果它的状态没有被改变，则不会有Dom操作）。 但是当然，你会说在这种情况下React仍然会触发虚拟Dom diff计算，这仍然需要花费一些成本。 因此，为了进一步优化它，您可以在包含大子树（基于它自己的状态）的视图上实现shouldComponentUpdate ，以避免React运行diff计算。

除了更简单的代码之外，发出简单更改的美妙之处在于Store可以与视图分离。 例如，如果您触发特定视图的特定更改详细信息，那么当视图不再侦听该存储时，您将需要删除或更改存储中的代码。