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

Question

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

我知道 React 有点像

呈现（数据）—> 用户界面。

这与 Angular 有何不同？

原文由 WinchenzoMagnifico 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有角的

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

 //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 毫秒后反映在控制台日志中。 Changes to the <input /> are reflected in the $scope.name property automatically, since ng-model sets up watches the input and $scope of the changes.来自代码的更改和来自 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 /> 的值 完全 由 render 函数控制。更新此值的唯一方法是从组件本身，这是通过将 onChange 事件附加到 <input /> 来完成的，它将 —95b4fab28900ab37257b06cfa133-d0e0 组件设置 this.state.value 方法 setState 。 <input /> 无法直接访问组件状态，因此无法进行更改。这是 单向绑定。 （查看此 代码笔）

原文由 Kyeotic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我画了一个小图。我希望它足够清楚。如果不是，请告诉我！

原文由 Gabriel 发布，翻译遵循 CC BY-SA 3.0 许可协议