有人能解释一下 React 单向数据绑定和 Angular 双向数据绑定的区别吗

我对这些概念有点模糊，如果我在 AngularJS 和 ReactJS 中完全构建相同的 ToDo 应用程序——是什么使得 React ToDo 使用单向数据绑定而不是 AngularJS 的双向数据绑定？

我知道“反应”有点像

渲染(数据)—— > UI。

这和 Angular 有什么不同？

83585 次浏览
小开

双向数据绑定提供了获取属性值并将其显示在视图中的能力，同时还有一个输入来自动更新模型中的值。例如，您可以在视图上显示属性“ Task”，并将文本框值绑定到相同的属性。因此，如果用户更新文本框的值，视图将自动更新，并且此参数的值也将在控制器中更新。相反，单向绑定只将模型的值绑定到视图，并且没有额外的监视器来确定视图中的值是否已被用户更改。

关于 React.js，它实际上并不是为双向数据绑定而设计的，但是，您仍然可以通过添加一些额外的逻辑手动实现双向绑定，例如参见这个 链接。在 Angular.JS 中，双向绑定是第一类公民，因此没有必要添加这个额外的逻辑。

小开
最佳答案

角度

当 angle 建立数据绑定时，存在两个“观察者”(这是一种简化)

//js
$scope.name = 'test';
$timeout(function()  { $scope.name = 'another' }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);


<!-- html --->
<input ng-model="name" />

输入将从 test开始，然后在1000毫秒内更新到 another。对 $scope.name的任何更改，无论是来自控制器代码还是通过更改输入，都将在4000ms 后反映在控制台日志中。对 <input />的更改自动反映在 $scope.name属性中，因为 ng-model设置了监视输入并将更改通知 $scope。代码的更改和 HTML 的更改是 双向绑定。(查看 这把小提琴)

做出反应

React 没有允许 HTML 改变组件的机制。HTML 只能引发组件响应的事件。典型的例子是使用 onChange。

//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}

<input />的值由 render函数控制 完全相信。更新这个值的唯一方法是从组件本身，这是通过将一个 onChange事件附加到 <input />来完成的，<input />使用 React 组件方法 setState将 this.state.value设置为。<input />不能直接访问组件状态，因此不能进行更改。这是 单向绑定。(看看这个 Codepen)

小开

我画了一幅画，希望画得够清楚，如果不清楚就告诉我！

2 ways data binding VS 1 way data binding

小开

数据绑定的一种方法非常简单，除了在 做出反应中，我们很少使用绑定这个词来指代数据的流动方式。

  const fn = (a) => { return ... }

如果一个值作为 a提供，我们将在函数作用域中使用该值。

  <Title name={"Hello"} />

上面这行并不意味着除了“ Hello”被发送到 Title 函数并将一个道具设置为“ Hello”之外，任何事情都会神奇地发生，如果你坚持在这里使用 bind 这个词，那么这就是绑定发生的地方。

无论您想使用此道具显示或连接其他状态或其他什么，您都必须自己编写代码！没有别的魔法了。顺便说一句，这在 做出反应里叫道具。道具或多或少是一个函数的输入参数编码为对象格式。因此，在 做出反应中对这种“绑定”的更准确的定义应该称为赋值。在 做出反应源代码中，在创建元素之后，您将很快看到一些东西。

  element.props = { name: "Hello" }

信不信由你，在 做出反应中没有其他代码在以后与这个“绑定”有任何关系。

例子

使用输入示例,

<input value={value} onChange={onChange} />

如果我们给 input一个 value，那么输入就会提取一个值来显示它。如果更改值，则打算更改显示。

为什么 value会改变？它不能默认。您必须通过监听系统事件(如 onChange)或业务逻辑(如 setTimeout)或任何您能想到的方式来改变它。但是更改是一个操作，您执行该操作，因此可以通过更改值来处理该操作。我猜这就是“单行道”的由来。本质上没有什么是免费的。

困惑

让我们感到困惑的是，DOM元素有自己的状态或属性。例如，我们可以不使用 做出反应执行 el.textContent="abc"。

<input />

如果我们像这样编写代码，在输入任何内容之后，我们仍然可以看到屏幕上的值发生了变化。但是这种行为与 做出反应没有任何关系，它是 DOM元素的功能。做出反应将第一个版本称为受控元素。基本上 做出反应覆盖 DOM的方式。

注意

老实说，只有在我停止在这些案例中使用“绑定”这个词之后，我才开始理解它们是什么。但那可能只是我一个人。

小开

什么是数据绑定？

数据绑定 是一种通用技术，它将来自提供者和使用者的数据源绑定在一起并同步它们。

角度数据竞价

根据 AngularJ 文件，AngularJS 应用程序中的数据绑定是模型和视图组件之间数据的自动同步。视图始终是模型的投影。当模型更改时，视图反映了更改，反之亦然

enter image description here

模板(即未编译的 HTML 以及任何其他标记或指令)在浏览器上编译。编译步骤生成一个实时视图。对视图的任何更改都会立即反映在模型中，模型中的任何更改都会传播到视图中。

ReactJs 中的数据绑定

视图中显示的数据与组件逻辑之间的连接在 ReactJS 中称为数据绑定。ReactJS 使用单向数据绑定。 在单向数据绑定中，可以遵循下列条件之一:

  • 组件到视图: 组件数据的任何更改都会反映在视图中。
  • View to Component: View 中的任何更改都会反映在组件的数据中。

enter image description here

阅读更多 给你和 给你。

小开

虽然 React 没有提供开箱即用的双向数据绑定，但是在很多用例中，它们似乎是可以使用的自然状态管理机制——特别是在处理复杂的单页面或 React 本机应用程序时，或者在处理大量异步协调的数据、转换和逻辑时。

反应绑定 增加了方便的双向绑定支持，反应/反应本机和 反应等待工具在此基础上构建了额外的异步支持。这些软件包，尤其是与 React Hook 和上下文结合使用的软件包，意味着仅仅因为使用 React 和 Angular，就不必在单向和双向模型之间进行严格的选择。


提交答案