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

标签 javascript angularjs reactjs flux reactjs-flux

上周,我一直试图弄清楚 two-way data binding (Angular) 是如何做到的。和 one-way data flow (React/Flux)是不同的。他们说,单向数据流更强大,更容易理解和遵循:它是确定性的,有助于避免副作用。不过,在我的新手眼中,它们看起来几乎相同: View 监听模型,模型对对 View 执行的操作使用react。都声称模型是唯一的事实来源

有人能以易于理解的方式全面解释它们之间的区别以及单向数据流如何更有益且更容易推理吗?

最佳答案

Angular 的双向数据绑定(bind)

这是通过一种每当 View 和模型发生变化时同步 View 和模型的机制实现的。在 Angular 中,您更新变量,其更改检测机制将负责更新 View ,反之亦然。有什么问题?您无法控制变更检测机制。我发现自己不得不求助于 ChangeDetectorRef.detectChanges 或 NgZone.run 来强制 View 更新。

为了不要太深入地研究 Angular 中的更改检测,您相信当您更改变量时,或者当可观察解析后它发生更改时,它会更新您需要的内容,但您会发现您不知道如何以及何时它会运行,有时在变量更改后它不会更新您的 View 。不用说,有时可以 查找问题发生的地点和时间是一件很痛苦的事情。

React 的单向数据流

这意味着 View 始终从模型获取其状态。要更新 View ,需要先更新模型,然后重绘 View 。 React 使 View 重绘过程极其高效,因为它比较的不是实际的 DOM,而是它保存在内存中的虚拟 DOM。但变化检测如何在这种动态中发挥作用呢?好吧,你手动触发它。

在 React 中,您设置状态的新值,然后这会导致 ReactDOM.render,从而导致 DOM 比较/更新过程。在 React/Redux 中,您分派(dispatch)更新存储(单一事实来源)的操作,然后更新其余部分。要点是,您始终知道事物何时发生变化以及导致变化的原因。这使得问题的解决变得非常简单。如果您的应用程序依赖于状态,您可以在触发更改的操作之前和之后查看它,并确保变量具有应有的值。

抛开实现

从独立于平台的 Angular 来看,它们并没有那么不同。单向流与双向绑定(bind)的区别在于更改时的变量更新。因此,您认为它们在概念上彼此相距不太远的印象与它们的实际用途并没有太大脱节。

关于javascript - 双向数据绑定(bind)(Angular)与单向数据流(React/Flux),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34565568/

相关文章:

javascript - 按 Observable 过滤 Observable

javascript - 当我通过 javascript 更改元素的 css "display"属性时,页面上没有任何变化

ruby-on-rails - 将 Rails 表单与 Angularjs 客户端表单验证一起使用时出现字段名称问题

带数字输入的 Angularjs ng-model

javascript - react 状态没有在 useEffect() 上给出正确的值

reactjs - 如何动态扩展或组合 Yup 模式

javascript - 基于 Node mysql 的模块不工作

javascript - 如何使用 javascript 或 jQuery 动态更改 Bootstrap 5 下拉菜单的偏移量?

angularjs - ngTagsInput - 只允许选择自动完成建议?

javascript - 如何单击按钮以获取具有反应的组件之一