【问题标题】：Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding谁能解释一下 React 的单向数据绑定和 Angular 的双向数据绑定的区别
【发布时间】：2016-04-03 20:37:22
【问题描述】：

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

我知道 React 有点像

渲染（数据）---> UI。

这与 Angular 有何不同？

【问题讨论】：

标签： javascript angularjs reactjs

【解决方案1】：

我画了一张小图。我希望它足够清楚。如果不是，请告诉我！

【讨论】：

什么是'Titre de l'annonce'？
法语中的“广告标题”
@DamienRoche 据我了解这个概念，区别在于：以两种方式数据绑定：更改数据更改视图，反之亦然 - 更新视图内部的输入更新数据。在数据流中：更新数据更新视图但更新视图中的输入不会更新数据，除非程序员通过将侦听器附加到将更新数据的输入来显式执行此操作。希望这会让你更清楚。
感谢@Patrick 的留言。我总是很高兴觉得我所做的事情对他人有用
链接已损坏@Gabriel 可以分享帖子中的图片吗？

【解决方案2】：

角度

当 Angular 设置数据绑定时，存在两个“观察者”（这是一种简化）

//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 的任何更改，无论是来自控制器代码还是通过更改输入，都将在 4000 毫秒后反映在控制台日志中。对<input /> 的更改会自动反映在$scope.name 属性中，因为ng-model 设置监视输入并通知$scope 更改。对代码的更改和对 HTML 的更改是双向绑定。（查看this fiddle）

反应

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 /> 来完成的，该事件使用 React 组件方法 setState 将 this.state.value 设置为。 <input /> 无法直接访问组件状态，因此无法进行更改。这是单向绑定。（看看这个codepen）

【讨论】：

谢谢，这非常有用。所以我猜 Angular 更像 UI Data 而不是 React 的 Render(data)--->UI ?
是的，这是一种非常简洁的表达方式
明确地说，数据绑定的不同之处在于它自动为您进行更新。在 React 示例中，UI → 数据仍在发生，只是默认情况下不会发生 - 您必须手动设置 onChange 侦听器并运行 handleChange。但是从那里开始，由于 React 的单向数据绑定，数据 → UI 更新确实自动发生。
仅供参考，小提琴需要引用 AngularJS 1.1.1，我猜对 AngularJS 1.0.1 的引用不再有效，得到了 404。奇怪的是在全新的小提琴中使用相同的代码（带有 1.1.1 参考）失败，不知道那是关于什么的。

【解决方案3】：

双向数据绑定提供了获取属性值并将其显示在视图上的能力，同时还具有自动更新模型中的值的输入。例如，您可以在视图上显示属性“任务”并将文本框值绑定到同一属性。因此，如果用户更新文本框的值，视图将自动更新，并且此参数的值也将在控制器中更新。相比之下，一种方式绑定仅将模型的值绑定到视图，并且没有额外的观察者来确定视图中的值是否已被用户更改。

关于 React.js，它并不是真正为双向数据绑定而设计的，但是，您仍然可以通过添加一些额外的逻辑来手动实现双向绑定，例如 link。在 Angular.JS 中双向绑定是一等公民，所以不需要添加这个额外的逻辑。

【讨论】：

【解决方案4】：

一种数据绑定方式非常简单，除了在React中我们很少使用绑定这个词来指代数据如何流动。

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

如果一个值作为a 提供，我们将在函数范围内使用该值。以上是编程101。

  <Title name={"Hello"} />

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

无论你想使用这个道具来显示或连接另一个状态或其他什么，你必须自己编码！没有其他魔法。顺便说一句，这在 React 中称为 props。 props 或多或少是以对象格式编码的函数的输入参数。所以在React中对这个“绑定”的更准确的定义应该叫做赋值。在 React 源代码中，你会在元素创建后很快看到一些东西。

  element.props = { name: "Hello" }

不管你信不信，React 中没有其他代码在以后与这个“绑定”有任何关系。

示例

使用输入示例，

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

如果我们将value 分配给input，输入将获取值以显示它。如果您更改值，您打算更改显示。

为什么value 会发生变化？默认情况下不能。您必须通过侦听像onChange 这样的系统事件或像setTimeout 这样的业务逻辑或任何您能想象的方式来更改它。但是更改是一个动作，您执行该动作，因此您可以通过更改值来处理该动作。我想这就是“单向”的来源。基本上没有什么是免费的。

混乱

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

<input />

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

注意

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

【讨论】：