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

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

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

Визуализация (данные) ---> Интерфейс.

Чем это отличается от Angular?

Источник

6 ответов

Решение

угловатый

Когда 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 /> не имеет прямого доступа к состоянию компонентов и не может вносить изменения. Это односторонняя привязка. (Проверьте этот кодекс)

Источник

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

2 способа привязки данных VS 1 способ привязки данных

Источник

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

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

Источник

Что такое привязка данных?

привязка данных — это общий метод, который связывает вместе источники данных от поставщика и потребителя и синхронизирует их.

Бидинг данных в Angular

согласно документам AngularJs , привязка данных в приложениях AngularJS — это автоматическая синхронизация данных между компонентами модели и представления. Вид всегда является проекцией модели. Когда модель изменяется, представление отражает изменение, и наоборот.

шаблон (который представляет собой нескомпилированный HTML вместе с любой дополнительной разметкой или директивами) компилируется в браузере. На этапе компиляции создается просмотр в реальном времени. Любые изменения в представлении немедленно отражаются в модели, а любые изменения в модели распространяются на представление.

Привязка данных в ReactJs

Связь между данными, которые должны отображаться в представлении, и логикой компонента называется привязкой данных в ReactJS. ReactJS использует одностороннюю привязку данных. При односторонней привязке данных может выполняться одно из следующих условий:

  • Компонент для просмотра: любое изменение данных компонента будет отражено в представлении.
  • View to Component: любое изменение в View будет отражено в данных компонента.

читайте больше здесь и здесь .

Источник

Хотя React не обеспечивает двустороннюю привязку данных из коробки, существует множество вариантов использования, для которых они кажутся естественным механизмом управления состоянием, особенно при работе со сложными одностраничными приложениями или приложениями React Native или с множество асинхронно скоординированных данных, преобразований и логики.

react-bindings добавляет удобную поддержку двусторонних привязок и инструментов для React/React Native и строит поверх него react-waitables с дополнительной поддержкой асинхронности.Эти пакеты, особенно используемые в сочетании с хуками и контекстами React, означают, что вам не нужно строго выбирать между однонаправленными и двунаправленными моделями только из-за работы с React и Angular.

Источник

Односторонняя привязка данных очень проста, за исключением того, что в React мы редко используем словесную привязку для обозначения того, как потоки данных.

        const fn = (a) => { return ... }

Если значение указано как a, мы будем использовать это значение в области действия функции. Вышеупомянутое программирование 101.

        <Title name={"Hello"} />

Вышеупомянутая строка не означает, что что-то может произойти волшебным образом, кроме того факта, что «Hello» отправляется в функцию Title и устанавливает одну опору в «Hello», если вы настаиваете на использовании здесь слова bind, то здесь и происходит привязка.

Если вы хотите использовать эту опору для отображения или связи с другим состоянием или чем-то еще, вы должны написать код самостоятельно! Другой магии нет. Кстати, в React это называется props . И props - это более или менее входной аргумент функции, закодированный в объектном формате. Поэтому более точное определение этой «привязки» в React следует называть присвоением. В исходном коде React вы увидите что-то очень быстро после создания элемента.

        element.props = { name: "Hello" }

И, хотите верьте, хотите нет, в React нет другого кода, который в дальнейшем имел бы какое-либо отношение к этой «привязке».

Пример

Используйте пример ввода,

      <input value={value} onChange={onChange} />

Если мы дадим input, вход будет принимать значение для его отображения. Если вы измените значение, вы намереваетесь изменить отображение.

Почему valueизменение? По умолчанию это невозможно. Вы должны изменить его, прослушав системное событие, например onChange или какая-то бизнес-логика вроде setTimeoutили любым другим способом, который вы можете себе представить. Но изменение - это действие, вы выполняете действие, поэтому вы можете обработать действие, изменив значение. Полагаю, отсюда и происходит «одностороннее движение». По сути, ничего бесплатного.

Путаница

Что нас смущает, так это то, что элемент DOM имеет собственное состояние или свойства. Например, мы можем сделать el.textContent="abc"без использования React .

      <input />

Если мы просто запрограммируем такой код, мы все равно увидим, что значение на экране изменится после того, как мы введем что-либо. Но это поведение не имеет ничего общего с React , это функциональность элемента DOM . React относится к первой версии как к управляемому элементу. По сути, React перезаписывает DOM .

ПРИМЕЧАНИЕ

Если честно, только после того, как я перестал употреблять слово «привязка» для этих случаев, я начал понимать, что это такое. Но это мог быть только я.

Источник
Другие вопросы по тегам