数据流和数据绑定。我经常阅读其中一个术语时，发现它可以与另一个术语互换使用。
例如source:
双向流又名数据绑定绑定两个状态：在大多数情况下 情况下，一个在控制器内部（例如某个变量），一个在内部 视图（例如文本框的内容）。绑定意味着，当一个 一块改变，另一块也改变并得到相同 值，所以你可以假装只有一个状态 参与（虽然实际上有两个）。写事件正在返回并且 在控制器和视图之间来回移动——因此是双向的。
问题：
附：我已经标记了现代 js 技术，例如 react 和 angular，因为这是我来自的上下文，但没有它们的示例也很好。如果您觉得列表不完整或可能会更好，请随时编辑上述问题。
【问题讨论】：
标签： reactjs angular redux data-binding two-way-binding
让我们来谈谈 React js 的实例。
当我们要在视图和控制器之间绑定数据时，我们必须使用 setState/redux/flux。这里，setState/flux/redux 用于数据流。 React 具有单向数据流，这意味着我们在视图中所做的更改不会自动反映在控制器中。您必须显式调用某些方法来传递数据。
此外，数据流不仅限于绑定。如果要在组件之间传递数据，可以使用这种机制。 （不要与绑定混淆）
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
在上面的代码中，你可以看到this.state.value是如何更新的。
与 React 相比，Angular 具有双向数据绑定。这意味着，您不必显式更改变量。当我们改变视图时它会自动更新。
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
<label for="ng-change-example2">Confirmed</label><br />
<tt>debug = {{confirmed}}</tt><br/>
<tt>counter = {{counter}}</tt><br/>
</div>
在这里，你可以看到，confirmed 是双向绑定的，因此，我们不需要手动更新状态。
【讨论】：
Angular 的双向数据绑定： 这是通过一种机制使视图和模型在任何一个发生变化时同步的机制成为可能的。在 Angular 中，你更新一个变量，它的变化检测机制将负责更新视图，反之亦然。有什么问题？您无法控制更改检测机制。我发现自己不得不求助于 ChangeDetectorRef.detectChanges 或 NgZone.run 来强制更新视图。
为了不深入研究 Angular 中的更改检测，您相信它会在您更改变量时更新您需要的内容，或者在可观察到的解析后更改时，但您会发现您不知道如何以及何时它运行，有时它不会在变量更改后更新您的视图。不用说，有时很难找到问题发生的地点和时间。
React 的单向数据流： 这意味着视图总是从模型中获取其状态。要更新视图，需要先更新模型，然后重绘视图。 React 使视图重绘过程非常高效，因为它比较的不是实际的 DOM，而是它保存在内存中的虚拟 DOM。但是，变化检测如何在这种动态中发挥作用？好吧，你手动触发它。
在 React 中，您设置状态的新值，然后会导致 ReactDOM.render，这会导致 DOM 比较/更新过程。在 React/Redux 中，您调度更新存储（单一事实来源）的操作，然后是其余的。重点是，你总是知道什么时候发生了变化，以及是什么导致了变化。这使得解决问题变得非常简单。如果您的应用依赖于状态，您可以在触发更改的操作之前和之后查看它，并确保变量具有它们应该具有的值。
【讨论】：