Does react have two-way binding?

There is no two-way binding in react; the design idea of ​​react is one-way data flow, there is no concept of two-way binding; react is the view layer, and single data flow can only be passed by the parent component to the child through props Components meet the requirements of view layer rendering and are easier to test and control, so there is no two-way binding in react.

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

Does react have two-way binding

react does not have two-way binding

The design idea of ​​React is one-way data flow. I think it can be understood this way Why there is no two-way data binding:

First of all, React is a pure View layer;

Then, what are the requirements for two-way data binding for React? -- Obviously it is a business requirement. Because one-way data flow already meets the requirements of View layer rendering and is easier to test and control (from Props or State), why is there a need for two-way data binding in pure React.

If you need to solve the two-way data binding problem, you can use third-party libraries such as Ant Design's rc-form. You can also store it in State or even Redux, depending on your needs.

So the lack of two-way data binding in React is not a lack of functionality or a conflict problem, but that React only focuses on solving a pure problem: the View layer.

One-way data flow

One-way data flow means that the flow of data can only be passed from the parent component to the child component through props, and cannot be passed from the child component to the parent component. Components pass data. To achieve two-way binding of data, the child component can only receive the method passed by the parent component props to change the data of the parent component, instead of directly passing the data of the child component to the parent component.

In fact, there is no concept of two-way binding in react. Every time we update the page and value, we need to call the specified api to trigger it. In vue, we only need to use the v-model instruction to complete it. Implementation, the instructions in vue are actually implemented using the syntax sugar of several events.

Recommended learning: "react video tutorial"

The above is the detailed content of Does react have two-way binding?. For more information, please follow other related articles on the PHP Chinese website!