Question

努力寻找或提出一个优雅的答案：

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

E.G：动态组件有一个按钮，点击它时会告诉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操作很昂贵。< / p>

ReactJS＆＃39;解决了＃39;这是通过使用另一个虚拟Dom层，它使用纯Javascript来计算最佳的＆＃39; Dom操作的差异，所以在React中，你永远不会有方法调用update()，你总是会根据视图的当前状态调用render()，而React会为你做优化。

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

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

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

2 个答案: