Я немного расплывчатый в этих понятиях. Если я полностью создаю одно приложение ToDo в AngularJS и ReactJS ---, что заставляет React ToDo использовать одностороннюю привязку данных к двунаправленной привязке данных AngularJS?
Я понимаю, что React вроде работает как
Render (data) --- > UI.
Как это отличается от Angular?
Когда angular устанавливает привязку данных, существуют два "наблюдателя" (это упрощение)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />
Вход начнется с test
, а затем обновится до another
в 1000 мс. Любые изменения в $scope.name
, либо из кода контроллера, либо путем изменения ввода, будут отображаться в журнале консоли 4000 мс позже. Изменения в <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 />
не имеет прямого доступа к состоянию компонентов и поэтому не может вносить изменения. Это односторонняя привязка. (Посмотрите codepen)
Я сделал небольшой рисунок. Надеюсь, это достаточно ясно. Дайте мне знать, если это не так!
Двусторонняя привязка данных обеспечивает возможность принимать значение свойства и отображать его на представлении, а также иметь ввод для автоматического обновления значения в модели. Например, вы можете показать свойство "задача" в представлении и связать значение текстового поля с тем же свойством. Таким образом, если пользователь обновляет значение текстового поля, представление будет автоматически обновляться, и значение этого параметра также будет обновляться в контроллере. Напротив, одностороннее связывание связывает только значение модели с представлением и не имеет дополнительного наблюдателя, чтобы определить, было ли изменено значение в представлении пользователем.
Что касается React.js, он не был предназначен для двусторонней привязки данных, однако вы все равно можете реализовать двустороннюю привязку вручную, добавив некоторую дополнительную логику, например, это ссылка. В Angular.JS двусторонняя привязка является гражданином первого класса, поэтому нет необходимости добавлять эту дополнительную логику.