Is React data binding really one way? It seems like two ways

Question

These are from the tutorials a couple of React that I am reading right now:

The state governs what the Facebook guys call one-way reactive data flow, which means our user interface will respond to every change in state.

and

Usually, user interfaces have many states that manage state difficultly. Re-rendering the virtual DOM every time any state changes, React makes it easier to think about the application being located. The process looks something like this: Signal to notify our application, some data has changed → Re-render virtual DOM → Diff previous virtual DOM with a new virtual DOM → Update only the real DOM with the necessary changes.

The first quote seems to suggest that the data stream goes from React to the user interface. But the second quote seems to suggest that it goes from the DOM to React, which then redraws the virtual DOM and the diff process, which replicates the real DOM. This is very similar to two-way data binding of Angular.

It's true? What am I missing? Is one-way reactive data flow just another name for Angular two-way data binding?

Answer 1

I find it necessary to distinguish between React and Flux, both of which implement a unidirectional data stream. I will only touch React here.

In Angular, modifying the DOM will directly mutate the value of the related sphere variables in your controller thanks to Angular's two-way data binding and digest loop. These are two ways, because, of course, any change in your controller is also directly reflected in the view attached to it.

Think of Angular as a Controller <--> View

In React, a component always displays the DOM based on its props and internal state. The React component can listen to the event that was fired in the DOM, which it displayed, which may seem a bit like a two-way data stream on its face, but there is an important difference: an event fired on the DOM does not 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 state change then triggers the DOM for reprocessing (if necessary). Thus, the components of props and status are the only source of truth and always control the output of the DOM. Of course, changes to the DOM can affect the component, but this is done indirectly.

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

Answer 2

Below is the stream:

Component

state-> virtual DOM → DOM

This is always a stream, whether it's its original render or a second render.

• Quoted bit: state-> virtual DOM → DOM
• newStateDifferentFromOldState → virtual DOM
• diff virtual DOM from 1 with virtual DOM from 2
• Updating only DOM elements that are pure run-time difference 3.

eg. 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.

Answer 3

Angular The essence of two ways of essence is that the view is associated with both the model and user input.

With React, a view is only bound to state, and user input cannot directly change the view, but it calls the component’s own methods to update its state, and the Reacts task is to re-select the view to reflect the state.