web-dev-qa-db-ja.com

Reactsの一方向データバインディングとAngularの双方向データバインディングの違いを誰でも説明できますか

AngularJSとReactJSで同じToDoアプリを完全に構築する場合、これらの概念については少し曖昧です。React ToDoが一方向データバインディングとAngularJSの双方向データバインディングを使用する理由は何ですか？

Reactのような作品のようなものを理解しています

Render（data）---> UI。

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

javascriptangularjsreactjs
93
WinchenzoMagnifico

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" />

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

React

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 />にアタッチすることによって実行されます。this.state.valueは、ReactコンポーネントメソッドsetStateで<input />はコンポーネントの状態に直接アクセスできないため、変更できません。これは、片方向バインディングです。 （これをチェックしてください codepen ）

140
Kyeotic

私は少し絵を描きました。私はそれが十分に明確であることを願っています。そうでない場合は教えてください！

2 ways data binding VS 1 way data binding

167
Gabriel

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

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

9
Jaco