Может кто-нибудь объяснить разницу между односторонней привязкой данных Reacts и двусторонней привязкой данных Angular

52

Я немного расплывчатый в этих понятиях. Если я полностью создаю одно приложение ToDo в AngularJS и ReactJS ---, что заставляет React ToDo использовать одностороннюю привязку данных к двунаправленной привязке данных AngularJS?

Я понимаю, что React вроде работает как

Render (data) --- > UI.

Как это отличается от Angular?

3 ответа

71
Лучший ответ

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)

  • 4
    Спасибо, это было чрезвычайно информативно. Так что я думаю, что Angular больше похож на UI <----> Data в отличие от React's Render (data) ---> UI?
  • 0
    Да, это очень краткий способ выразить это
Показать ещё 1 комментарий
102

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

Изображение 2717

  • 15
    Что такое «заголовок объявления»?
  • 1
    «Название объявления» на французском
Показать ещё 5 комментариев
6

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню