web-dev-qa-db-fra.com

Quelqu'un peut-il expliquer la différence entre la liaison de données unidirectionnelle de Reacts et la liaison de données bidirectionnelle d'Angular

Je suis un peu flou sur ces concepts, si je construis la même application ToDo complètement dans AngularJS et ReactJS --- ce qui rend le React ToDo utiliser la liaison de données unidirectionnelle par rapport à la liaison de données bidirectionnelle de AngularJS ?

Je comprends que React fonctionne en quelque sorte comme

Rendu (données) ---> UI.

Comment est-ce différent d'angulaire?

javascriptangularjsreactjs
96
WinchenzoMagnifico

Angular

Quand angular établit une liaison de données, deux "observateurs" existent (simplification)

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

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

L'entrée commence par test, puis passe à another après 1000 ms. Toute modification apportée à $scope.name, à partir du code du contrôleur ou en modifiant l'entrée, sera reflétée dans le journal de la console 4000 ms plus tard. Les modifications apportées à <input /> sont répercutées automatiquement dans la propriété $scope.name, car ng-model configure la surveillance de l'entrée et notifie $scope des modifications. Les modifications apportées au code et celles apportées au code HTML constituent une liaison bidirectionnelle . (Découvrez ce violon )

React

React n'a pas de mécanisme permettant au HTML de modifier le composant. Le code HTML peut uniquement déclencher des événements auxquels le composant répond. L'exemple typique est d'utiliser onChange.

//js
render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
    this.setState({value: e.target.value});
}

La valeur de <input /> est contrôlée entièrement par la fonction render. Le seul moyen de mettre à jour cette valeur est à partir du composant lui-même, ce qui consiste à attacher un événement onChange au <input /> qui définit this.state.value sur avec le composant React méthode setState. Le <input /> n'a pas d'accès direct à l'état des composants et ne peut donc pas être modifié. Ceci est une liaison à sens unique . (Découvrez ceci codepen )

146
Kyeotic

J'ai fait un petit dessin. J'espère que c'est assez clair. Faites-moi savoir si ce n'est pas le cas!

2 ways data binding VS 1 way data binding

174
Gabriel

La liaison de données bidirectionnelle permet de prendre la valeur d’une propriété et de l’afficher dans la vue, tout en disposant d’une entrée permettant de mettre à jour automatiquement la valeur dans le modèle. Vous pouvez, par exemple, afficher la propriété "tâche" dans la vue et lier la valeur de la zone de texte à cette même propriété. Ainsi, si l'utilisateur met à jour la valeur de la zone de texte, la vue sera automatiquement mise à jour et la valeur de ce paramètre sera également mise à jour dans le contrôleur. En revanche, une liaison à sens unique ne lie que la valeur du modèle à la vue et ne dispose pas d'un observateur supplémentaire pour déterminer si la valeur de la vue a été modifiée par l'utilisateur.

En ce qui concerne React.js, il n’était pas vraiment conçu pour la liaison de données bidirectionnelle. Toutefois, vous pouvez toujours implémenter manuellement la liaison bidirectionnelle en ajoutant une logique supplémentaire, voir par exemple this link . Dans Angular.JS, la liaison bidirectionnelle est un citoyen de première classe. Il n’est donc pas nécessaire d’ajouter cette logique supplémentaire.

9
Jaco