我对这些概念有点模糊,如果我完全在 AngularJS 和 ReactJS 中构建相同的 ToDo 应用程序—是什么让 React ToDo 使用单向数据绑定而不是 AngularJS 的双向数据绑定?
我理解 React 的工作原理如下
Render(data) —> UI.。
这与 Angular 有何不同?
当 angular 设置数据绑定时,存在两个“观察者”(这是一个简化)
//js $scope.name = 'test'; $timeout(function() { $scope.name = 'another' }, 1000); $timeout(function() { console.log($scope.name); }, 5000); <!-- html ---> <input ng-model="name" />
输入将以 开始test,然后在 1000 毫秒内更新为another。对 的任何更改$scope.name(无论是来自控制器代码还是通过更改输入)都将在 4000 毫秒后反映在控制台日志中。对 的更改会自动<input />反映在属性中,因为设置 会监视输入并通知更改。来自代码的更改和来自 HTML 的更改是双向绑定的。(查看jsfiddle)$scope.name``ng-model``$scope
test
another
$scope.name
<input />
$scope.name``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 />