任何人都可以解释Reacts单向数据绑定和Angular的双向数据绑定之间的区别

Question

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

我知道React有点像

渲染（数据）---＆gt; UI。

这与Angular有何不同？

Answer 1

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

Answer 2

角

当角度设置数据绑定两个＆＃34;观察者＆＃34;存在（这是一种简化）

//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 />功能完全控制<{1}}的值 。更新此值的唯一方法是从组件本身，这是通过将render事件附加到onChange来完成的，<input />将this.state.value设置为使用React组件方法setState 。 <input />无法直接访问组件状态，因此无法进行更改。这是单向绑定。 （查看此codepen）

Answer 3

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

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