AngularJSとReactJSで同じToDoアプリを完全に構築すると、AngularJSの双方向データバインディングに対してReact ToDoで一方向のデータバインディングが使用されるのはなぜですか？

私はReactが次のように機能することを理解しています

Render（data）---> UI。

これはAngularとどう違うのですか？

角度

angularがデータバインドをセットアップするとき、2つの「ウォッチャー」が存在します（これは単純化です）。

//js
$scope.name = 'test';
$timeout(function()  { $scope.name = 'another' }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);

<!-- html --->
<input ng-model="name" />

入力はで始まり、1000msでにtest更新さanotherれます。変更$scope.nameコントローラコードから、または入力を変更することによってのいずれかでは、後コンソールログ4000msに反映されます。の設定は入力を監視して変更を通知するため、への変更<input />は$scope.nameプロパティに自動的に反映されます。コードからの変更とHTMLからの変更は双方向バインディングです。（このフィドルをチェックしてください）ng-model$scope

反応する

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ます。この値を更新する唯一の方法は、コンポーネント自体からです。これは、Reactコンポーネントメソッドで設定するにonChangeイベントをアタッチすることによって行われます。コンポーネントの状態に直接アクセスすることはできません。また、変更を加えることはできませんので。これは一方向のバインディングです。（このコードペンをチェックしてください）<input />this.state.valuesetState<input />

小さな絵を描いた。私はそれが十分に明確であることを望みます。そうでない場合はお知らせください！

双方向データバインディングは、プロパティの値を取得してビューに表示する機能を提供すると同時に、モデルの値を自動的に更新するための入力も備えています。たとえば、ビューにプロパティ "task"を表示し、テキストボックスの値をその同じプロパティにバインドできます。したがって、ユーザーがテキストボックスの値を更新すると、ビューは自動的に更新され、このパラメーターの値もコントローラーで更新されます。対照的に、一方向バインディングはモデルの値をビューにバインドするだけであり、ビューの値がユーザーによって変更されたかどうかを判断する追加のウォッチャーはありません。

React.jsに関しては、それは実際には双方向データバインディング用に設計されていませんが、いくつかの追加のロジックを追加することで双方向バインディングを手動で実装できます。たとえば、このリンクを参照してください。Angular.JSでは、双方向バインディングはファーストクラスのシチズンであるため、この追加のロジックを追加する必要はありません。