Is react one-way data flow or two-way?

react is a one-way data flow, not two-way; one-way data flow means that after the data is changed on a node, it will only affect other nodes in one direction, while two-way binding means that The binding between the data model and the view will affect other nodes in different directions. The performance in React is that data is mainly passed from parent nodes to child nodes through props, so it is a one-way data flow.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

Is react a one-way data flow or a two-way flow?

React is a one-way data flow. Data is mainly passed from parent nodes to child nodes (through props).

If one of the top-level (parent) props changes, React will re-render all child nodes.

In React, data only flows in one direction, from parent component to child component. If data is shared between sibling child components, then the data should be stored in the parent component and passed to both child components that need the data.

Data flows from the parent component to the child component, data updates are sent to the parent component, and the parent component makes the actual changes.

The data is in the parent component and passed down to the child component, but both the parent component and the child component can use the data, however:

If the data must be updated, only the parent component should do it Update;

If the child component needs to change data, it will send the updated data to the parent component, and the parent component will complete the change. After the parent component performs the change, it will pass the updated data to the child component.

Extended knowledge:

What is two-way data binding?

Two-way binding between data model and view.

When the data changes, the view also changes. When the view changes, the data will also change synchronously; it can be said that the user's modifications on the view will automatically be synchronized to the data model. , the data model also changes in the same way.

Advantages of two-way data binding: There is no need to perform CRUD (Create, Retrieve, Update, Delete) operations like one-way data binding. Two-way data binding is most commonly used on forms, so that when the user After the front-end page completes the input, we have already obtained the data entered by the user and put it into the data model without any operation.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Is react one-way data flow or two-way?. For more information, please follow other related articles on the PHP Chinese website!