Ответ 1

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)

Ответ 2

Я сделал небольшой рисунок. Надеюсь, это достаточно ясно. Дайте мне знать, если это не так!

Ответ 3

Двусторонняя привязка данных обеспечивает возможность принимать значение свойства и отображать его на представлении, а также иметь ввод для автоматического обновления значения в модели. Например, вы можете показать свойство "задача" в представлении и связать значение текстового поля с тем же свойством. Таким образом, если пользователь обновляет значение текстового поля, представление будет автоматически обновляться, и значение этого параметра также будет обновляться в контроллере. Напротив, одностороннее связывание связывает только значение модели с представлением и не имеет дополнительного наблюдателя, чтобы определить, было ли изменено значение в представлении пользователем.

Что касается React.js, он не был предназначен для двусторонней привязки данных, однако вы все равно можете реализовать двустороннюю привязку вручную, добавив некоторую дополнительную логику, например, это ссылка. В Angular.JS двусторонняя привязка является гражданином первого класса, поэтому нет необходимости добавлять эту дополнительную логику.