Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of react two-way binding, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this react two-way binding article. Let's take a look at it.

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

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

Does react have two-way binding?

React does not have two-way binding

React is designed with one-way data flow, and I think we can understand 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 business requirements. 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 do you need bi-directional data binding in pure React?

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

So React's lack of two-way data binding is not a lack of functionality or conflict, but React is only concerned with solving a pure problem: the View layer.

Unidirectional data flow

Unidirectional data flow means that the data flow can only be transferred by the parent component to the child component through props, but not by the child component to the parent component. In order to realize the two-way binding of the data, the child component can only receive the method transmitted by the parent component props to change the data of the parent component, instead of directly transferring the data of the child component to the parent component.

In fact, there is no concept of two-way binding in react, each update page and value need to call the specified api to trigger, but in vue only need to use the v-model instruction to fully achieve, in fact, the instruction in vue is also implemented using the syntax sugar of several events.

This is the end of the article on "is there a two-way binding to react?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "is there a two-way binding of react?". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.