我对这些概念有些模糊,如果我完全在AngularJS和ReactJS中构建相同的ToDo应用程序,那么,什么使React ToDo使用单向数据绑定而不是AngularJS的双向数据绑定?
我了解React之类的作品
渲染(数据)—> UI。
这与Angular有何不同?
当角度设置数据绑定时,存在两个“观察者”(这是一种简化)
//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的更改是 双向绑定 。(查看这个小提琴)
test
another
$scope.name
<input />
ng-model
$scope
React没有允许HTML更改组件的机制。HTML仅可以引发组件响应的事件。典型的示例是使用onChange。
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 /> *
render``onChange``<input />``this.state.value``setState``<input />