Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding

Question

I'm a bit fuzzy on these concepts, If I build the same ToDo app completely in AngularJS and ReactJS--- what makes the React ToDo use one-way data binding vs the AngularJS's two-way data binding?

I understand that React sort of works like

Render(data) ---> UI.

How is this different from Angular?

Solution 1

Angular

When angular sets up databinding two "watchers" exist (this is a simplification)

//js
$scope.name = 'test';
$timeout(function()  { $scope.name = 'another' }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);

<!-- html --->
<input ng-model="name" />

The input will start out with test, then update to another in 1000ms. Any changes to $scope.name, either from controller code or by changing the input, will be reflected in the console log 4000ms later. Changes to the <input /> are reflected in the $scope.name property automatically, since ng-model sets up watches the input and notifies $scope of the changes. Changes from the code and changes from the HTML are two-way binding. (Check out this fiddle)

React

React doesn't have a mechanism to allow the HTML to change the component. The HTML can only raise events that the component responds to. The typical example is by using onChange.

//js
render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
    this.setState({value: e.target.value});
}

The value of the <input /> is controlled entirely by the render function. The only way to update this value is from the component itself, which is done by attaching an onChange event to the <input /> which sets this.state.value to with the React component method setState. The <input /> does not have direct access to the components state, and so it cannot make changes. This is one-way binding. (Check out this codepen)

Solution 2

I made a little drawing. I hope it's clear enough. Let me know if it's not !

Solution 3

Two-way data binding provides the ability to take the value of a property and display it on the view while also having an input to automatically update the value in the model. You could, for example, show the property "task" on the view and bind the textbox value to that same property. So, if the user updates the value of the textbox the view will automatically update and the value of this parameter will also be updated in the controller. In contrast, one way binding only binds the value of the model to the view and does not have an additional watcher to determine if the value in the view has been changed by the user.

Regarding React.js, it was not really designed for two way data binding, however, you can still implement two-way binding manually by adding some additional logic, see for example this link. In Angular.JS two-way binding is a first class citizen, so there is no need to add this additional logic.

Solution 4

What is data binding?

data binding is a general technique that binds data sources from the provider and consumer together and synchronizes them.

Data Biding in Angular

according to AngularJs documents, Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa

the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.

Data Binding in ReactJs

The connection between the data to be displayed in the view and the component’s logic is called data binding in ReactJS. ReactJS uses one-way data binding. In one-way data binding one of the following conditions can be followed:

• Component to View: Any change in component data would get reflected in the view.
• View to Component: Any change in View would get reflected in the component’s data.

read more here and here.

View more solutions

Comments

[WinchenzoMagnifico]

Thanks, this was extremely informative. So I guess Angular works more like UI <----> Data in contrast to React's Render(data)--->UI ?

[Kyeotic]

Yes, thats a very concise way to put it

[ghd]

What's 'Titre de l'annonce'?

[timelf123]

'Ad title' in french

[Cake_Seller Слава Україні]

@DamienRoche as far as I understand this concept the difference is next: In two way data binding: changing data changes view and vice versa — updating input inside view updates data. In on way data flow: updating data updates view but updating input in view will not update data unless programmer do it explicitly by attaching listener to input which will update data. Hope that will make it a bit more clear for you.

[Adam Zerner]

To be clear, the distinguishing thing about data binding is that it does the updates for you automatically. In the React example, UI → data is still happening, it's just that it doesn't happen by default - you have to manually set up the onChange listener and run handleChange. But from there, because of React's one way data binding, the data → UI update does happen automatically.

[Gabriel]

Thanks, @Patrick for your message. I am always very happy to feel something I did is useful for others

[user3141326]

link is broken @Gabriel could you share the image in the post?

[Gabriel]

@user3141326 I can see the image. I guess it's fixed now. The image is hosted by Stackoverflow

[ducin]

@Gabriel I think the first drawing is misleading, since the 2 watchers are separate, independent, doing their 1-way job. And your drawing suggests that a change in any direction goes through the two, whereas in reality it goes through one (depending on which way)

[Josh Sutterfield]

FYI the fiddle needed a reference to AngularJS 1.1.1, I guess the ref to AngularJS 1.0.1 wasn't valid anymore, was getting a 404. Oddly using identical code in a brand new fiddle (with a 1.1.1 reference) fails, don't know what that's about.

[nSv23]

@Gabriel isn't 1 way more work, since we have to manually write listeners and is not automatic as 2 way? Is there any advantage to 1 way over 2 way binding?

[Gabriel]

@nSv23 It's what I thought before, but the 1 way is easier to debug, have better performance and your code is just clearer in my point of view

[Tal L]

The point raised by @Cake_Seller is crystal clear, thanks. Tutorials over the web do mention other paradigms, and also refer to them as React's one-way data flow, such as the parent-to-child data flow (via props) and even refer to Redux/Flux architecture's Unidirectional data flow. While all these are indeed a one-way data flow, it may be confusing to a beginner.