Flux存储将更改发送到特定的反应组件，而不是所有组件

Flux store emitting changes to specific react components rather than all components.

本文关键字：组件 存储 Flux      更新时间：2023-09-26

努力寻找或想出一个优雅的答案:

如果我有多个动态react组件正在监听一个flux store来更新它们的子组件，是否有可能向特定组件发出更改，而不是向注册为侦听该store上更改的所有组件发出更改?

E。G:动态组件有一个按钮，当点击它时，它会告诉flux store发送一些数据给API。动态组件将根据flux store发出的响应和更改来更新它的子视图。但是由于所有的动态组件都在监听存储，所以它们都会更新它们的子视图，这是不希望出现的行为。理想情况下，通量存储可以识别要向哪个组件发出变化，或者组件可以识别变化不是针对它们的。

这可能吗?还是违背了通量原理?

我不知道它是否违反了flux架构，但它似乎没有利用它的一些美。

一个简单的emit更改(没有更改细节)的美妙之处在于，一个store不需要有关于视图的显式知识，而且，在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，你的store可以发出变化而不需要任何细节，而监听它的视图可以用"最佳"Dom操作来渲染(所以如果它的状态没有改变，就不会有Dom操作)。当然，在这种情况下，React仍然会触发虚拟Dom diff计算，这仍然需要一些成本。所以为了进一步优化它，你可以在一个包含大的子树(基于它自己的状态)的视图上实现shouldComponentUpdate，以避免React运行diff计算。

发出一个简单的更改的好处，除了更容易的代码，是Store可以从视图解耦。例如，如果您触发特定视图的特定更改细节，那么当视图不再侦听该存储时，您将需要删除或更改存储中的代码。

这并不违反通量原则，但要注意不要只有一个大商店，有时最好是分在几个小商店。但是我想我理解你的用例，一个存储包含类似对象的集合(像骨干集合)。

假设你的商店收到一个新对象或一个新对象数组(或商店中要更新的东西)，你有一个register函数将这个对象(或更新)添加到你的商店中。当然，这个对象有一个id字段(或类似的东西)。然后，对于你刚刚接收到的数组中的每个新对象，你将发出id。

和你的视图绑定到他们的id作为更改事件。基本上你使用你的store就像一个数组，当数组改变时你发出键作为事件。你的视图监听这个键/id，然后从你的商店获取特定的数据，仍然使用这个id/key。

相关文章：