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

Question

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

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)

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.