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

Question

I am a little vague in these terms. If I completely create one ToDo application in AngularJS and ReactJS --- what forces React ToDo to use one-way data binding to bidirectional AngularJS data binding?

I understand that React seems to work like

Render (data) ---> UI.

How is this different from Angular?

Answer 1

Angular

When angular establishes data binding, there are two "observers" (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" /> 

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

To react

React does not have a mechanism that allows HTML to modify a component. HTML can only raise events that the component responds to. A typical example is the use of onChange .

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

The value of <input /> completely controlled by the render function. The only way to update this value is with the component itself, which is done by attaching the onChange event to <input /> , which sets this.state.value using the React setState component method. <input /> does not have direct access to the state of components and therefore cannot make changes. This is a one way binding . (See codepen )

Answer 2

I made a small drawing. Hope this is clear enough. Let me know if this is not the case!

Answer 3

Two-way data binding provides the ability to take the value of a property and display it on the view, as well as have input for automatically updating the value in the model. For example, you can show the task property in a view and associate the value of the text field with the same property. Thus, if the user updates the value of the text field, the view will be automatically updated, and the value of this parameter will also be updated in the controller. In contrast, one-way binding only binds the model value to the view and does not have an additional observer to determine if the value in the view has been changed by the user.

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