谁能解释Reacts单向数据绑定和Angular双向数据绑定之间的区别

109

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

我了解React之类的作品

渲染（数据）---> UI。

这与Angular有何不同？

javascript angularjs reactjs

— 温琴佐
source

Answers:

165

角度的

当角度设置数据绑定时，存在两个“观察者”（这是一种简化）

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

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

输入将以开始test，然后更新为another1000ms。$scope.name通过控制器代码或通过更改输入对进行的任何更改，都将在4000毫秒后反映在控制台日志中。对的更改会自动<input />反映在$scope.name属性中，因为ng-modelsetup会监视输入并通知$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 />控制。更新此值的唯一方法是从组件本身，这是通过使用React组件方法将事件附加到设置为的事件来完成的。在没有对组件状态的直接访问，因此它不能更改。这是单向绑定。（查看此Codepen）renderonChange<input />this.state.valuesetState<input />

— Kyeotic
source

谢谢，这是非常有益的。所以我想Angular与React的Render（data）---> UI相比更像UI <----> Data？

— WinchenzoMagnifico 2015年

是的，这是一种非常简洁的表达方式

— Kyeotic

需要明确的是，关于数据绑定的区别在于它会自动为您进行更新。在React示例中，UI→数据仍在发生，只是默认情况下它没有发生- 您必须手动设置onChange侦听器并运行handleChange。但是从那里开始，由于React的一种数据绑定方式，数据→UI更新确实会自动发生。

— 亚当·泽纳

仅供参考，小提琴需要对AngularJS 1.1.1的引用，我猜对AngularJS 1.0.1的引用不再有效，得到的是404。奇怪的是，在全新的小提琴中使用相同的代码（带有1.1.1引用）失败，不知道那是什么。

— Josh Sutterfield

194

我做了一点画。我希望它足够清楚。让我知道是否不是！

— 加布里埃尔
source

什么是“ Titre de l'annonce”？

— ghd

法语中的“广告标题”

— timelf123'December

据我了解，@DamienRoche的区别是：数据绑定有两种方式：更改数据会更改视图，反之亦然-更新视图中的输入会更新数据。在途中数据流：更新数据将更新视图，但更新视图中的输入将不会更新数据，除非程序员通过将侦听器附加到将更新数据的输入上来明确地执行此操作。希望这会使您更清楚。

— Cake_Seller

谢谢@Patrick的信息。我一直感到很高兴自己所做的事情对他人有用

— Gabriel

链接已损坏@Gabriel您可以分享帖子中的图片吗？

— user3141326 '18

双向数据绑定提供了获取属性值并将其显示在视图上的能力，同时还具有输入以自动更新模型中的值。例如，您可以在视图上显示属性“任务”，然后将文本框值绑定到同一属性。因此，如果用户更新文本框的值，则视图将自动更新，并且此参数的值也将在控制器中更新。相反，一种方式绑定仅将模型的值绑定到视图，而没有其他观察者来确定用户是否更改了视图中的值。

关于React.js，它并不是真正为双向数据绑定而设计的，但是，您仍然可以通过添加一些其他逻辑来手动实现双向绑定，例如，参见this link。在Angular.JS中，双向绑定是头等公民，因此无需添加此附加逻辑。

— 亚历克斯
source