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

Question

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

我明白React有点像

渲染(数据)---> UI.

这与Angular有什么不同？

Answer 1

我画了一点画.我希望它足够清楚.如果不是,请告诉我!

Answer 2

角

当角度设置数据绑定时,存在两个"观察者"(这是一个简化)

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

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

输入将从1开始test,然后更新到another1000ms.对$scope.name控制器代码或更改输入的任何更改都将在4000毫秒后的控制台日志中反映出来.由于设置监视输入并通知更改,因此<input />对$scope.name属性的更改会自动反映在属性中.代码的更改和HTML的更改是双向绑定.(看看这个小提琴)ng-model$scope

应对

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组件方法设置的事件来完成的.在没有对组件状态的直接访问,因此它不能更改.这是单向绑定.(看看这个codepen)renderonChange<input />this.state.valuesetState<input />

Answer 3

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

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