两路数据绑定(Angular)与单向数据流(React/Flux) [英] Two-way data binding (Angular) vs one-way data flow (React/Flux)

问题描述

在上周，我一直在尝试弄清双向数据绑定(角度)和单向数据流(反应/流量)不同.他们说，单向数据流功能更强大，更易于理解和遵循:它是确定性的，有助于避免产生副作用.不过，在我的新手看来，它们的外观几乎相同:视图侦听模型，并且模型对对视图执行的操作做出反应.两者都声称模型是单个真理之源.

In the last week, I’ve been trying to make sense how two-way data binding (Angular) and one-way data flow (React/Flux) are different. They say that one-way data flow is more powerful and easier to understand and follow: it is deterministic and helps avoiding side-effects. In my newbie eyes though, they both look pretty much the same: the view listens to the model, and the model reacts on actions done to the view. Both claim that the model is the single source of truth.

有人能以一种可以理解的方式全面地解释它们之间的真正差异吗?单向数据流如何更有益，更容易推理?

Could anybody comprehensively explain in understandable way how they are really different and how one-way data flow is more beneficial and easier to reason about?

推荐答案

Angular的双向数据绑定

每当发生更改时，都可以通过同步视图和模型的机制使之成为可能.在Angular中，您将更新变量，并且其更改检测机制将负责更新视图，反之亦然.有什么问题?您无法控制变更检测机制.我发现自己不得不诉诸ChangeDetectorRef.detectChanges或NgZone.run来强制更新视图.

Angular's two-way data binding

It's made possible by a mechanism that synchronizes the view and the model whenever either change. In Angular, you update a variable and its change detection mechanism will take care of updating the view, and viceversa. What's the problem? You don't control the change detection mechanism. I found myself having to resort to ChangeDetectorRef.detectChanges or NgZone.run to force the view to update.

为了不深入研究Angular中的更改检测，您相信它会在您更改变量时或在可观察到的解析后更改变量时更新您需要的内容，但是您会发现您不知道如何以及何时使用它会运行，有时在变量更改后它不会更新您的视图.不用说，有时找出问题发生的地点和时间是很痛苦的.

To not dive too deep into change detection in Angular, you trust it will update what you need when you change a variable, or when it gets changed after an observable resolves, but you'll find you have no idea how and when it runs, and sometimes it will not update your view after a variable changes. Needless to say, it can sometimes be a pain to find where and when a problem occured.

这意味着视图始终从模型获取其状态.要更新视图，您需要先更新模型，然后重新绘制视图.React使视图重绘过程非常高效，因为它不比较实际的DOM，而是比较它保留在内存中的虚拟DOM.但是，变化检测在这种动态情况下如何工作?好吧，您可以手动触发它.

It means that the view always gets its state from the model. To update the view, you need to update the model first, and then redraw the view. React makes the view redrawing process extremely efficient because it compares not the actual DOM but a virtual DOM it keeps on memory. But how does change detection work in this dynamic? Well, you trigger it manually.

在React中，设置状态的新值，这将导致ReactDOM.render，这将导致DOM比较/更新过程.在React/Redux中，您将分派一些操作，这些操作将更新商店(单个事实来源)，然后更新其余部分.关键是，您总是知道什么时候发生了更改，以及是什么导致了更改.这使得解决问题变得非常直接.如果您的应用程序依赖状态，则可以在触发更改的动作之前和之后对其进行查看，并确保变量具有应具有的值.

In React, you set the state's new value, which then causes a ReactDOM.render, which causes the DOM comparing/updating process. In React/Redux you dispatch actions which update the store (single source of truth) and then the rest. Point is, you always know when the stuff changes, and what caused the change. This makes problem solving quite straight forward. If your app depends on the state, you look at it before and after the action that triggered the change, and you make sure variables have the value they're supposed to.

从独立于平台的角度来看，它们并没有什么不同.将单向流与双向绑定分开的是更改时的变量更新.因此，您对它们在概念上相距不算太远的印象并没有太过脱离其实际用途.

From a platform independent point of view, they're not so different. What separates one-way flow from two-way binding is a variable update on change. So your impression that that they're conceptually not too far from each other is not too divorced from their practical uses.

这篇关于两路数据绑定(Angular)与单向数据流(React/Flux)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！