Flux商店发出特定反应成分而非所有成分的变化。 [英] Flux store emitting changes to specific react components rather than all components.

问题描述

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

如果我有多个动态反应组件正在收听一个助焊剂商店来更新他们的孩子组件是否可以发出对特定组件的更改，而不是对注册的所有组件发出更改以监听该商店的更改？

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

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

解决方案

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

一个简单的发射变化（没有变化细节）的美妙之处在于商店不需要具有关于视图的明确知识，而且，使用React Virtual Dom框架，它不应该'为了进一步优化性能，你可以在你的React视图上实现shouldComponentUpdate（基于它自己的属性的差异），以避免触发你的性能过高。

树差异算法。

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

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

 这个。 emit（{
 details：{x：'x'，y： Y}，
源：对象A 
）}; 
  

收到此信息的视图（或控制器）需要更新它的Dom的详细信息，你会打电话给 update（changes.details）而不是初始 render（）方法，因为Dom操作很昂贵。

ReactJS通过另一个虚拟Dom层解决了这个问题，它使用纯Javascript来计算Dom操作中的最佳差异，所以在React中，你永远不会有方法调用 update（），您将始终根据视图的当前状态调用 render（），并且React会为您进行优化。

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

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

Struggling to find or come up with an elegant answer to this one:

If I have multiple dynamic react components that are listening to one flux store to update their child components is it possible to emit changes to specific components rather than emitting changes to all the components that are registered to listen to changes on that store?

E.G: A dynamic component has a button and when clicked its tells the flux store to send some data to API. The dynamic component will it update its child view depending on the response and change emitted by the flux store. But since all the dynamic components are listening to the store they will all update their child views which is the undesired behaviour. Ideally the flux store could identify which component to emit the change to, or the components can identify that change is not for them.

Is this possible? Or does it go against flux principles?

解决方案

I don't know if it violate flux architecture, but it seems not leveraging some beauties of it.

The beauty of a simple emit change (without change detail) is that a store wouldn't need to have explicit knowledge on views, also, with the React Virtual Dom framework, it shouldn't cost too much performance hit.

To further optimize the performance, you can implement shouldComponentUpdate on your React view (base on the differences in it's own properties), to avoid triggering the tree-diff algorithm.

See this: https://facebook.github.io/react/docs/component-specs.html

== Add more info == In more traditional MVC, the model will emit changes to a particular source and with particular details, e.g.

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

The view (or controller) that receive this needs such detail to update it's Dom, you will call the update(changes.details) instead of the initial render() method because Dom manipulation is expensive.

ReactJS 'solved' this by having another virtual Dom layer, which use pure Javascript to compute the 'optimal' differences in Dom manipulation, so in React, you never have a method call update(), you will always call render() base on current state of the view, and React does the optimization for you.

So using Flux with React, your store can just emit change without any details and the views that listen to it can just render with 'optimal' Dom manipulation (so if it's state hasn't been changed, there will be no Dom manipulation). But of course, you will say in this case React will still trigger the virtual Dom diff computation, which still cost something. So to further optimize it, you can implement shouldComponentUpdate on a view that contains big sub-tree (base on it's own state), to avoid React to run the diff computation.

The beauty of emit a simple change, besides easier code, is that Store can be pretty much decoupled from view. For example if you trigger specific change details for particular views, then you will need to remove or change code in store(s) when the view is not listening the that store anymore.

这篇关于Flux商店发出特定反应成分而非所有成分的变化。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！