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

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

我明白React有点像

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

这与Angular有什么不同？

1> Gabriel..：

---

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

---

什么是'Titre de l'annonce'？

---

@DamienRoche据我所知,这个概念的区别在于:双向数据绑定:更改数据更改视图,反之亦然 - 更新视图内部的输入更新数据.在途中数据流:更新数据更新视图但更新视图中的输入将不会更新数据,除非程序员通过将侦听器附加到将更新数据的输入来显式执行此操作.希望能让你对它更加清晰.

---

法语中的“广告标题”

---

谢谢,@ Patrick给你留言.我总是很高兴能够感受到我所做的事对别人有用

2> Kyeotic-Stop..：

---

角

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

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

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

应对

React没有允许HTML更改组件的机制.HTML只能引发组件响应的事件.典型的例子是使用onChange.

//js
render() { 
    return 
}
handleChange(e) {
    this.setState({value: e.target.value});
}

它的值完全由函数控制.更新此值的唯一方法是从组件本身,这是通过将事件附加到使用React组件方法设置的事件来完成的.在没有对组件状态的直接访问,因此它不能更改.这是单向绑定.(看看这个codepen)renderonChangethis.state.valuesetState

---

谢谢,这非常有用.所以我猜Angular的工作方式更像UI <---->数据,与React的渲染(数据)---> UI相比？

---

要清楚,数据绑定的区别在于它为您自动执行更新.在React示例中,UI→数据仍在发生,它只是默认情况下不会发生 - _you_必须手动设置`onChange`监听器并运行`handleChange`.但是从那里开始,由于React的单向数据绑定,数据→UI更新_does_会自动发生.

3> Alex..：

---

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

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