Kann jemand den Unterschied zwischen der Einweg-Datenbindung von Reacts und der Zweiweg-Datenbindung von Angular erklären?

109

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?

WinchenzoMagnifico
quelle

Antworten:

165

Winkelig

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 )

Reagieren

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 )

Kyeotic
quelle
9
Danke, das war sehr informativ. Angular funktioniert also eher wie UI <----> Daten im Gegensatz zu React's Render (Daten) ---> UI?
WinchenzoMagnifico
Ja, das ist eine sehr prägnante Art, es
auszudrücken
5
Das Besondere an der Datenbindung ist, dass die Aktualisierungen automatisch für Sie durchgeführt werden . Im React-Beispiel passieren UI → -Daten immer noch, es ist nur so, dass dies nicht standardmäßig geschieht - Sie müssen den onChangeListener manuell einrichten und ausführen handleChange. Aufgrund der einseitigen Datenbindung von React erfolgt die Aktualisierung der Daten → Benutzeroberfläche jedoch automatisch.
Adam Zerner
Zu Ihrer Information, die Geige brauchte einen Verweis auf AngularJS 1.1.1. Ich denke, der Verweis auf AngularJS 1.0.1 war nicht mehr gültig und erhielt einen 404. Seltsamerweise schlägt die Verwendung identischen Codes in einer brandneuen Geige (mit einem 1.1.1-Verweis) fehl Ich weiß nicht, worum es geht.
Josh Sutterfield
194

Ich habe ein wenig gezeichnet. Ich hoffe es ist klar genug. Lass es mich wissen, wenn es nicht so ist!

2-Wege-Datenbindung VS 1-Wege-Datenbindung

Gabriel
quelle
21
Was ist "Titre de l'annonce"?
Ghd
6
'Ad title' in französisch
timelf123
14
@DamienRoche Soweit ich dieses Konzept verstehe, ist der Unterschied der nächste: In zweierlei Hinsicht Datenbindung: Ändern der Datenänderungen Ansicht und umgekehrt - Aktualisieren der Eingabe in der Ansicht aktualisiert Daten. Unterwegs Datenfluss: Durch das Aktualisieren der Datenaktualisierungsansicht, aber durch das Aktualisieren der Eingabe in der Ansicht werden die Daten nur aktualisiert, wenn der Programmierer dies explizit tut, indem er den Listener an die Eingabe anfügt, die die Daten aktualisiert. Hoffe das macht es dir ein bisschen klarer.
Cake_Seller
2
Danke, @Patrick für deine Nachricht. Ich bin immer sehr glücklich zu fühlen, dass etwas, das ich getan habe, für andere nützlich ist
Gabriel
Link ist kaputt @Gabriel Könnten Sie das Bild in der Post teilen?
user3141326
12

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.

Alex
quelle