Ich bin ein bisschen verwirrt in Bezug auf diese Konzepte. Wenn ich dieselbe ToDo-App vollständig in AngularJS und ReactJS erstelle, warum verwendet React ToDo eine Einweg-Datenbindung im Vergleich zur Zweiweg-Datenbindung des AngularJS?
Ich verstehe, dass React so funktioniert
Rendern (Daten) ---> Benutzeroberfläche.
Wie unterscheidet sich das von Angular?
Antworten:
Wenn Angular die Datenbindung einrichtet, existieren zwei "Beobachter" (dies ist eine Vereinfachung).
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />Die Eingabe beginnt mit testund wird dann anotherin 1000 ms aktualisiert. Alle Änderungen $scope.name, entweder am Controller-Code oder durch Ändern der Eingabe, werden 4000 ms später im Konsolenprotokoll angezeigt. Änderungen an der <input />werden $scope.nameautomatisch in der Eigenschaft übernommen, da ng-modeldas Setup die Eingabe überwacht und $scopeüber die Änderungen benachrichtigt . Änderungen am Code und Änderungen am HTML sind wechselseitig bindend . (Schau dir diese Geige an )
React verfügt nicht über einen Mechanismus, mit dem der HTML-Code die Komponente ändern kann. Der HTML-Code kann nur Ereignisse auslösen, auf die die Komponente reagiert. Das typische Beispiel ist die Verwendung von onChange.
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}Der Wert von <input />wird vollständig von der renderFunktion gesteuert . Der einzige Weg , diesen Wert zu aktualisieren ist von der Komponente selbst, die durch Anbringen ein erfolgtes onChangeEreignisses an denen , <input />welche Mengen this.state.valuean mit der Reaktion Komponentenmethode setState. Der <input />hat keinen direkten Zugriff auf den Komponentenstatus und kann daher keine Änderungen vornehmen. Dies ist eine Einwegbindung . (Schauen Sie sich diesen Codepen an )
onChangeListener manuell einrichten und ausführen handleChange. Aufgrund der einseitigen Datenbindung von React erfolgt die Aktualisierung der Daten → Benutzeroberfläche jedoch automatisch.
Ich habe ein wenig gezeichnet. Ich hoffe es ist klar genug. Lass es mich wissen, wenn es nicht so ist!
Die bidirektionale Datenbindung bietet die Möglichkeit, den Wert einer Eigenschaft in der Ansicht anzuzeigen und gleichzeitig eine Eingabe zur automatischen Aktualisierung des Werts im Modell zu erhalten. Sie können beispielsweise die Eigenschaft "task" in der Ansicht anzeigen und den Textfeldwert an dieselbe Eigenschaft binden. Wenn der Benutzer den Wert des Textfelds aktualisiert, wird die Ansicht automatisch aktualisiert und der Wert dieses Parameters wird auch in der Steuerung aktualisiert. Im Gegensatz dazu bindet eine Einwegbindung nur den Wert des Modells an die Ansicht und verfügt nicht über einen zusätzlichen Beobachter, um festzustellen, ob der Wert in der Ansicht vom Benutzer geändert wurde.
In Bezug auf React.js wurde es nicht wirklich für die bidirektionale Datenbindung entwickelt. Sie können die bidirektionale Bindung jedoch weiterhin manuell implementieren, indem Sie eine zusätzliche Logik hinzufügen. Siehe beispielsweise diesen Link . In Angular.JS ist die bidirektionale Bindung ein erstklassiger Bürger, sodass diese zusätzliche Logik nicht hinzugefügt werden muss.