Flux store 对特定的 react 组件而不是所有组件发出更改。

Posted 2023-02-22

【中文标题】Flux store 对特定的 react 组件而不是所有组件发出更改。

【英文标题】：Flux store emitting changes to specific react components rather than all components.

【发布时间】：2016-01-22 04:32:25

【问题描述】：

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

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

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

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

【参考方案1】：

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

简单的发出变化（没有变化细节）的美妙之处在于，商店不需要对视图有明确的了解，而且，使用 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()，你总是会调用 @987654326 @ 基于视图的当前状态，React 为您进行优化。

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

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

【讨论】：

投了反对票的人能解释一下问题所在吗？

我不理解否决票，Francois Richard 回答发出 id 进行检查是我采用的解决方案，但验证是使用你建议的 shouldComponentUpdate 完成的，所以我想知道否决票的原因。

其实我不知道，想一想也许这是一个很好的解决方案，当您的商店发生变化时，您会触发一个简单的“更改”事件，您可以使用 MyStore[id] 获取组件所需的数据] 然后在 componentShouldUpdate 中进行比较。确实可能是一个很好的解决方案。

更新你的答案我会赞成，我认为这是一个非常糟糕的主意，但实际上它可能是正确的做法。毕竟我想我错了。

当然。投票不是主要的事情，我只是想知道这些论点有什么问题，更新了答案以使其更全面

【参考方案2】：

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

假设您的商店收到一个新对象或一组新对象（或要在您的商店中更新的东西），您有一个注册函数，它将将此对象（或更新）添加到您的商店。 肯定这个对象有一个 id 字段（或类似的东西）。然后，对于您刚刚收到的数组的每个新对象，您将发出 id。

并且您的视图作为更改事件绑定到它们的 id。基本上，您像数组一样使用您的商店，当数组更改时，您将键作为事件发出。您的视图侦听此键/ID，然后从您的商店获取特定数据，但仍使用此 ID/键。

希望清楚，让我知道。