WinchenzoMagnifico WinchenzoMagnifico - 9 months ago 65
AngularJS Question

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

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?



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

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

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

The input will start out with test, then update to another in 1000ms. Any changes to $, 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 $ 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 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.

render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
handleChange(e) {

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)