双向数据绑定(Angular)与单向数据流(React/Flux)

2024-05-04

上周,我一直在试图弄清楚如何双向数据绑定(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(使用前将#替换为@)

双向数据绑定(Angular)与单向数据流(React/Flux) 的相关文章

随机推荐

  • scala.collection.Seq 不适用于 Java

    Using 阿帕奇火花2 0 1 Java 7 在 Apache Spark Java API 文档中 DataSet 类出现了一个example http spark apache org docs latest api java org
  • Postgres如何从外部服务器传输所有枚举

    我有两个数据库 我希望能够在它们之间传输数据 因此我想将一个大型模式从一个数据库导入到另一个数据库 其中有枚举的分配 所以我遇到了这里描述的问题SQL 创建具有枚举列的外部表时出错 https stackoverflow com quest
  • 维基百科与 Python

    我有这个非常简单的 python 代码来读取 wikipedia api 的 xml import urllib from xml dom import minidom usock urllib urlopen http en wikipe
  • 将动态子项添加到我的 Firebase 参考网址

    我一直在尝试将子项动态添加到我的 firebase 数据引用 URL 但到目前为止还没有成功 假设我有以下数据结构 MyApp beta signups users fred 邮箱 电子邮件受保护 cdn cgi l email prote
  • Tomcat 连接池与准备好的语句缓存

    从 DBCP 连接池升级到 Tomcat 自己的实现 基于优秀的比较here http tomcat apache org tomcat 7 0 doc jdbc pool html Introduction 我有点困惑为什么他们放弃了这两
  • 使用 Box2d 拖放 UIViews (iOS) [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我最近发现了一个很好的教程 用于使用
  • 散点图的连续分位数

    我有一个数据集 我为其绘制了回归图 使用ggplot2 s stat smooth ggplot data mydf aes x time y pdm geom point stat smooth col red 我还想使用相同的方法获得分
  • 汇编-符号标志和奇偶校验标志

    我不明白什么时候设置标志标志 什么时候设置奇偶校验 据我所知 符号标志表示运算结果的符号 0表示正数 1表示负数 那么为什么在下一个代码中 mov al 5 sub al 124 SF为零 结果是负数 关于PF 为什么a和b中设置了PF a
  • 如何将Matlab代码库与Android集成?

    我有一个算法和 MATLAB 中的一些其他代码 我想在我的 Android 应用程序中使用它 我怎样才能做到这一点 我可以从 MATLAB 制作 jar 文件以便与 Android 一起使用吗 我必须做点别的事吗 如果您还有其他产品 适用于
  • 向每个表格单元格添加进度条以显示文件进度 - Java

    当您单击 加密 时 应用程序会对放入表中的每个文件进行加密 我想显示文件加密时的进度 然后 状态 列将从 未处理 更改为 已处理 类似于您查看电子邮件中附加的多个文件的方式 我一直在研究单元格渲染器和 ProgressBarTablecel
  • 企业库 CacheFactory.GetCacheManager 抛出空引用

    我正在尝试将使用 1 1 版本的企业库缓存块的应用程序转换为 2 0 版本 我认为我真正遇到的问题是不同 EntLib 部分的配置被分成几个文件 显然 这曾经是由ConfigurationManager 部分处理程序 但现在已经过时 取而代
  • 何时在 F# 中使用区分联合与记录类型

    在继续讨论复杂的示例之前 我试图先弄清楚 F 的基础知识 我正在学习的材料介绍了区分联合和记录类型 我已经审阅了两者的材料 但我仍然不清楚为什么我们要使用其中之一而不是另一个 我创建的大多数玩具示例似乎都可以在两者中实现 记录似乎非常接近我
  • 有没有可供非开发人员(翻译人员!)编辑资源包的工具?

    我们公司让外部翻译人员翻译我们的软件的做法是 嗯 怎么说呢 cvs co 一些模块 ant Translation export 在这个目标后面有一个自制的 ant 任务 将所有资源包一起导出为一个大的制表符分隔的文本文件 列 不同的语言
  • VC++ 代码 DOM 可以从 VS 插件访问吗?

    Visual Studio IntelliSense for VC 包括 完整 EDG C 解析器 http www edg com location c frontend 英特尔和其他公司也使用 由于插件可以访问 C Code DOM 如
  • BackgroundWorker 如何决定在哪个线程上运行 RunWorkerCompleted 处理程序?

    我试图弄清楚 BGW 在工作完成后如何决定运行 RunWorkerCompleted 处理程序的线程 我的初始测试使用 WinForm 应用程序 在 UI 线程上 我开始bgw1 RunWorkerAsync 然后我尝试开始bgw2 Run
  • 导入 python 模块时如何解决 KeyError?

    我试图从不同的目录级别导入模块 所以我使用了 import os import sys sys path insert 0 os path abspath os path join os path dirname file 但现在我收到这个
  • 如何获得隐式依赖关系来使用 Xcode 4 中的工作区?

    我想使用 Xcode 4 和 Cocoa Touch 静态库项目来管理工作区中的项目 其中包含我可以从其他项目引用的共享代码 根据 WWDC 2010 视频和 Xcode 4 文档 Xcode 4 中的工作区有一个 隐式依赖项 功能 我一直
  • ASP.NET MVC C#:将多个表/查询中的数据引入视图中

    好吧 我仍在掌握 ASP NET 和 MVC 框架的窍门 并将我的知识从经典的 ASP 和 VB 转换过来 所以请保持温柔 我的第一个视图 home details X 运行良好感谢之前的帮助为我指明了正确的方向 https stackov
  • 如何在matplotlib_venn中将维恩图保存为PNG图

    使用以下代码我尝试创建维恩图 然后另存为文件 import matplotlib from matplotlib venn import venn2 set1 set A B C D set2 set B C D E plt venn2 s
  • 双向数据绑定(Angular)与单向数据流(React/Flux)

    上周 我一直在试图弄清楚如何双向数据绑定 Angular https docs angularjs org guide databinding and 单向数据流 React Flux https youtu be i 969noyAM是不