質問

AngularJSとReactJSで完全に同じToDoアプリを構築した場合、React ToDoはAngularJSの双方向データバインディングに対して何が一方向のデータバインディングを使用するのでしょうか。

私は、Reactが以下のように動作することを理解しています。

Render(data) ---> UIです。

Angularとどう違うのでしょうか？

どのように解決するのですか？

アンギュラー

angularがデータバインディングを設定するとき、2つのquot;watcher"が存在します（これは単純化されたものです）。

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

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

入力は、まず test で始まり、更新され another に更新されます。への変更は $scope.name を変更すると、4000ms 後にコンソールログに反映されます。への変更は <input /> に反映されます。 $scope.name プロパティに自動的に反映されます。 ng-model は入力を監視し $scope に通知します。コードからの変更と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 /> を設定する this.state.value をReactコンポーネントのメソッドである setState . また <input /> はコンポーネントの状態に直接アクセスできないので、変更を加えることができません。これは 一方向バインディング . (これをチェックする コードペン )