任何人都可以解释Reacts单向数据绑定和Angular的双向数据绑定之间的区别
我对这些概念有些模糊,如果我完全在AngularJS和ReactJS中构build相同的ToDo应用程序 – 是什么让React ToDo使用单向数据绑定与AngularJS的双向数据绑定?
我明白,反应类似的作品
渲染(数据)—> UI。
这与Angular有何不同?
angular
当angular度设置数据绑定存在两个“观察者”(这是一个简化)
//js $scope.name = 'test'; $timeout(function() { $scope.name = 'another' }, 1000); $timeout(function() { console.log($scope.name); }, 5000); <!-- html ---> <input ng-model="name" />
input将从test
开始,然后在1000ms内更新到another
。 对控制器代码或通过改变input的任何对$scope.name
的更改都会在控制台日志4000ms以后反映出来。 对<input />
更改会自动反映到$scope.name
属性中,因为ng-model
设置$scope.name
input并通知更改的$scope
。 来自代码的变化和来自HTML的变化是双向绑定 。 (看看这个小提琴 )
应对
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
事件this.state.value
到使用React组件方法setState
将this.state.value
设置为的<input />
来完成。 <input />
不能直接访问组件状态,所以不能进行更改。 这是单向绑定 。 (看看这个codepen )
我画了一个小图。 我希望这是很清楚的。 让我知道如果不是!
双向数据绑定提供了获取属性值并将其显示在视图上的function,同时还有一个input来自动更新模型中的值。 例如,您可以在视图上显示属性“任务”,并将文本框的值绑定到同一个属性。 因此,如果用户更新文本框的值,视图将自动更新,并且该参数的值也将在控制器中更新。 相比之下,一种绑定方式仅将模型的值绑定到视图,并且没有额外的监视器来确定视图中的值是否已被用户更改。
关于React.js,它并不是真正为双向数据绑定devise的,但是,您仍然可以通过添加一些额外的逻辑来手动实现双向绑定,请参阅此链接 。 在Angular.JS中,双向绑定是第一类公民,因此不需要添加这个额外的逻辑。