Is React's data-binding really one way? It seems like it is two way Is React's data-binding really one way? It seems like it is two way reactjs reactjs

Is React's data-binding really one way? It seems like it is two way


I think it's necessary to make a distinction between React and Flux, both of which implement a uni-directional data flow. I'll only touch on React here.

In Angular a change to the DOM will directly mutate the value of bound scope variables in your controller thanks to angular's two-way data binding and the digest loop. It is two way because, of course, any change in your controller is also directly reflected in the view attached to it.

Think of Angular as Controller <--> View

In React a component always renders its DOM based on its props and internal state. A React component can listen to event being fired in the DOM it rendered, which might sound a bit like two-way data flow on the face of it but there is an important difference: An event fired on the DOM does not directly update the internal state of the component. The component must listen to the event and then explicitly update the component with the new state. This change of state then triggers the DOM to be re-rendered (if it needs to). In this way the components props and state are the single source of truth and always drive the DOM output. Of course changes in the DOM can affect the component but it is done in an indirect manner.

Think of React as Component State --> DOM --> New Component State --> New DOM


Angular's two way of binding's essence is that the view is bound both to the model and the user's input.

Angular's two way of binding

With React, the view is bound only to the state and a user's input cannot directly change the view, but triggers the component's own methods to update its state and Reacts job is to rerender the view so it reflects the state.

React's one way binding


The flow here is:

Component

state-> virtual DOM -> DOM

This is always the flow, whether its initial render or second render.

  1. The quoted bit is:state->virtual DOM -> DOM
  2. newStateDifferentFromOldState -> virtual DOM
  3. diff virtual DOM from 1 with virtual DOM from 2
  4. Only update the elements of the DOM that are the net difference of performing 3.

e.g. 1->2->3->4, repeat in this order from 2 (2->3->4->2->3->4...so on)

This is in no way related to the concept of two way data binding.