一尘不染

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

angularjs

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

我了解React之类的作品

渲染(数据)—> UI。

这与Angular有何不同?


阅读 189

收藏
2020-07-04

共1个答案

一尘不染

角度的

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

//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
__render``onChange``<input />``this.state.value``setState``<input />
*

2020-07-04