Javascript 谁能解释一下 Reacts 单向数据绑定和 Angular 的双向数据绑定的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34519889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding
提问by WinchenzoMagnifico
I'm a bit fuzzy on these concepts, If I build the same ToDo app completely in AngularJS and ReactJS--- what makes the React ToDo use one-way data binding vs the AngularJS's two-way data binding?
我对这些概念有点模糊，如果我完全在 AngularJS 和 ReactJS 中构建相同的 ToDo 应用程序——是什么让 React ToDo 使用单向数据绑定与 AngularJS 的双向数据绑定？
I understand that React sort of works like
我知道 React 有点像
Render(data) ---> UI.
渲染（数据）---> UI。
How is this different from Angular?
这与 Angular 有何不同？
回答by Gabriel
I made a little drawing. I hope it's clear enough. Let me know if it's not !
我画了一个小图。我希望它足够清楚。如果不是，请告诉我！
回答by Kyeotic
Angular
角
When angular sets up databinding two "watchers" exist (this is a simplification)
当 angular 设置数据绑定时，存在两个“观察者”（这是一个简化）
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />
The input will start out with test, then update to anotherin 1000ms. Any changes to $scope.name, either from controller code or by changing the input, will be reflected in the console log 4000ms later. Changes to the <input />are reflected in the $scope.nameproperty automatically, since ng-modelsets up watches the input and notifies $scopeof the changes. Changes from the code and changes from the HTML are two-way binding. (Check out this fiddle)
输入将从 开始test，然后another在 1000 毫秒后更新。对 的任何更改$scope.name，无论是来自控制器代码还是更改输入，都将在 4000 毫秒后反映在控制台日志中。对 的更改会自动<input />反映在$scope.name属性中，因为ng-model设置会监视输入并通知$scope更改。代码更改和 HTML 更改是双向绑定。（看看这个小提琴）
React
反应
React doesn't have a mechanism to allow the HTML to change the component. The HTML can only raise events that the component responds to. The typical example is by using onChange.
React 没有允许 HTML 更改组件的机制。HTML 只能引发组件响应的事件。典型的例子是使用onChange.
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}
The value of the <input />is controlled entirelyby the renderfunction. The only way to update this value is from the component itself, which is done by attaching an onChangeevent to the <input />which sets this.state.valueto with the React component method setState. The <input />does not have direct access to the components state, and so it cannot make changes. This is one-way binding. (Check out this codepen)
的值完全由函数<input />控制。更新这个值的唯一方法是从组件本身，这是通过使用 React 组件方法将事件附加到which 设置为 来完成的。在没有对组件状态的直接访问，因此它不能更改。这是单向绑定。（看看这个代码笔）renderonChange<input />this.state.valuesetState<input />
回答by Alex
Two-way data binding provides the ability to take the value of a property and display it on the view while also having an input to automatically update the value in the model. You could, for example, show the property "task" on the view and bind the textbox value to that same property. So, if the user updates the value of the textbox the view will automatically update and the value of this parameter will also be updated in the controller. In contrast, one way binding only binds the value of the model to the view and does not have an additional watcher to determine if the value in the view has been changed by the user.
双向数据绑定提供了获取属性值并将其显示在视图上的能力，同时还具有自动更新模型中的值的输入。例如，您可以在视图上显示属性“task”并将文本框值绑定到相同的属性。因此，如果用户更新文本框的值，视图将自动更新，并且该参数的值也将在控制器中更新。相比之下，一种方式绑定仅将模型的值绑定到视图，并没有额外的观察者来确定视图中的值是否已被用户更改。
Regarding React.js, it was not really designed for two way data binding, however, you can still implement two-way binding manually by adding some additional logic, see for example this link. In Angular.JS two-way binding is a first class citizen, so there is no need to add this additional logic.
关于 React.js，它并不是真正为双向数据绑定而设计的，但是，您仍然可以通过添加一些额外的逻辑来手动实现双向绑定，例如参见这个链接。在 Angular.JS 中，双向绑定是一等公民，所以不需要添加这个额外的逻辑。
