上周,我一直在试图弄清楚如何双向数据绑定(Angular) https://docs.angularjs.org/guide/databinding and 单向数据流(React/Flux) https://youtu.be/i__969noyAM是不同的。他们说单向数据流更强大,更容易理解和遵循:它是确定性的,有助于避免副作用。但在我的新手眼中,它们看起来几乎一样:视图监听模型,模型对视图所做的操作做出反应。两者都声称该模型是单一事实来源.
任何人都可以以可理解的方式全面解释它们是如何的really不同以及单向数据流如何更有益且更容易推理?
Angular 的双向数据绑定
这是通过一种每当视图和模型发生变化时同步视图和模型的机制实现的。在 Angular 中,您更新变量,其更改检测机制将负责更新视图,反之亦然。有什么问题?您无法控制变更检测机制。我发现自己不得不求助于 ChangeDetectorRef.detectChanges 或 NgZone.run 来强制视图更新。
为了不要太深入地研究 Angular 中的更改检测,您相信当您更改变量时,或者当可观察的解析后它发生更改时,它会更新您需要的内容,但您会发现您不知道它如何以及何时运行,有时变量更改后它不会更新您的视图。不用说,有时可以
查找问题发生的地点和时间是一件很痛苦的事情。
React 的单向数据流
这意味着视图始终从模型获取其状态。要更新视图,需要先更新模型,然后重绘视图。 React 使视图重绘过程极其高效,因为它比较的不是实际的 DOM,而是它保存在内存中的虚拟 DOM。但变化检测如何在这种动态中发挥作用呢?好吧,你手动触发它。
在 React 中,您设置状态的新值,这会导致 ReactDOM.render,从而导致 DOM 比较/更新过程。在 React/Redux 中,您分派更新存储(单一事实来源)的操作,然后更新其余部分。要点是,您始终知道事物何时发生变化以及导致变化的原因。这使得问题的解决变得非常简单。如果您的应用程序依赖于状态,您可以在触发更改的操作之前和之后查看它,并确保变量具有应有的值。
抛开实施
从独立于平台的角度来看,它们并没有那么不同。单向流与双向绑定的区别在于更改时的变量更新。因此,您认为它们在概念上彼此相距不太远的印象与它们的实际用途并没有太大脱节。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)