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

角

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

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

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

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

react

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

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

的值完全由函数<input />控制。更新这个值的唯一方法是从组件本身，这是通过使用 React 组件方法将事件附加到which 设置为 来完成的。在没有对组件状态的直接访问，因此它不能更改。这是单向绑定。（看看这个代码笔）renderonChange<input />this.state.valuesetState<input />

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

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

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

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

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

  <Title name={"Hello"} />

除了将“Hello”发送到 Title 函数并将一个props设置为“Hello”这一事实之外，上面的行并不意味着任何事情会神奇地发生，如果您坚持在此处使用 bind 一词，则这就是绑定发生的地方。

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

  element.props = { name: "Hello" }

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

例子

使用输入示例，

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

如果我们给一个valueto input，输入会选择值来显示它。如果您更改该值，则您打算更改显示。

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

困惑

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

<input />

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

笔记

老实说，直到我停止对这些案例使用“绑定”一词后，我才开始了解它们是什么。但这可能只是我。