Je suis un peu flou sur ces concepts, si je construis complètement la même application ToDo dans AngularJS et ReactJS --- qu'est-ce qui fait que React ToDo utilise la liaison de données unidirectionnelle par rapport à la liaison de données bidirectionnelle d'AngularJS?
Je comprends que React fonctionne en quelque sorte comme
Rendu (données) ---> UI.
En quoi est-ce différent d'Angular?
Réponses:
Lorsque angular met en place une liaison de données, deux "observateurs" existent (c'est une 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 commencera par test, puis se mettra à jour anotherdans 1000 ms. Toute modification apportée à $scope.name, soit du code du contrôleur, soit en modifiant l'entrée, sera reflétée dans le journal de la console 4000 ms plus tard. Les modifications apportées à la <input />sont $scope.nameautomatiquement reflétées dans la propriété, car les ng-modelparamètres de configuration surveillent l'entrée et notifient $scopeles modifications. Les modifications du code et les modifications du HTML sont une liaison bidirectionnelle . (Regardez ce violon )
React n'a pas de mécanisme permettant au HTML de changer le composant. Le HTML ne peut déclencher que des événements auxquels le composant répond. L'exemple typique est en utilisant 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 entièrement contrôlée par la renderfonction. La seule façon de mettre à jour cette valeur est à partir du composant lui-même, ce qui se fait en attachant un onChangeévénement à <input />quel est défini this.state.valueavec la méthode du composant React setState. Le <input />n'a pas d'accès direct à l'état des composants et ne peut donc pas apporter de modifications. Il s'agit d' une liaison à sens unique . (Découvrez ce codepen )
onChangeécouteur et l'exécuter handleChange. Mais à partir de là, à cause d'une des données de façon de lier React, les données → mise à jour l' interface utilisateur ne se produisent automatiquement.
J'ai fait un petit dessin. J'espère que c'est assez clair. Faites-moi savoir si ce n'est pas le cas!
La liaison de données bidirectionnelle offre la possibilité de prendre la valeur d'une propriété et de l'afficher sur la vue tout en ayant également une entrée pour mettre à jour automatiquement la valeur dans le modèle. Vous pouvez, par exemple, afficher la propriété "tâche" sur 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, la liaison à sens unique lie uniquement 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'a pas été vraiment conçu pour la liaison de données bidirectionnelle, cependant, vous pouvez toujours implémenter la liaison bidirectionnelle manuellement en ajoutant une logique supplémentaire, voir par exemple ce lien . 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.