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

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

我明白React有点像

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

这与Angular有什么不同?

WinchenzoMagnifico asked 2019-08-13T17:58:22Z
3个解决方案
160 votes

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

2 ways data binding VS 1 way data binding

Gabriel answered 2019-08-13T17:59:29Z
138 votes

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

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

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

输入将以<input />开始,然后在1000ms内更新为render。 对控制器代码或更改输入的任何更改onChange将在4000ms后的控制台日志中反映出来。 对<input />的更改会自动反映在this.state.value属性中,因为setState设置监视输入并通知<input />更改。 代码的更改和HTML的更改是双向绑定。 (看看这个小提琴)

应对

React没有一种允许HTML更改组件的机制。 HTML只能引发组件响应的事件。 典型的例子是使用<input />

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

<input />的值完全由render函数控制。 更新此值的唯一方法是从组件本身,这是通过将onChange事件附加到<input />来完成的,该事件使用React组件方法247936058055406490将this.state.value设置为.<input />无法直接访问组件状态,因此它 不能做出改变。 这是单向绑定。 (看看这个codepen)

Tyrsius answered 2019-08-13T17:59:04Z
9 votes

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

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

Jaco answered 2019-08-13T18:00:04Z
translate from https://stackoverflow.com:/questions/34519889/can-anyone-explain-the-difference-between-reacts-one-way-data-binding-and-angula