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

This article mainly explains "React is not a two-way data flow". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "whether React is a two-way data flow".

React is not a two-way data flow, but an one-way data flow. Unidirectional data flow means that when data is changed on a node, only other nodes in one direction will be affected. In React, data is mainly transferred from parent node to child node through props. If a parent props changes, React will re-render all child nodes.

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

Is React a bidirectional data stream?

React is not a two-way data flow, react is an one-way data flow

Both vue and ng are bidirectional data streams and VM bidirectional data bindings. React is an one-way data flow, and the data of the model layer flows to the view layer.

What does one-way data flow mean?

One-way data flow is that when a node is changed, it will only affect other nodes in one direction.

One-way data flow means that data can only be modified in one direction, as we can understand, as shown in the following figure. There are two child components 1 and 2 under a parent component, and the parent component can pass data to the child component. If the child component obtains the name of the parent component, after the name is modified in child component 1, the values in child component 2 and parent component will not change. This is precisely because the mechanism in Vue is an one-way data flow, and the child component cannot directly change the state of the parent component. But conversely, if the name in the parent component is modified, of course the name in the two child components will also change.

Simple unidirectional data flow (unidirectional data flow) means that users visit the View,View to send out the Action of user interaction, and update the state accordingly in the Action. The update of state triggers the process of updating the page by View. In this way, the data is always clear and unidirectional, easy to maintain and predictable.

React follows the data flow from top to bottom, that is, one-way data flow.

React is an one-way data flow, and the data is mainly passed from the parent node to the child node (through the props). If a props at the top level (parent) changes, React re-renders all child nodes.

One-way data flow is not an one-way binding, and even one-way data flow has nothing to do with binding. For React, the two principles of one-way data flow (from top to bottom) and single data source limit the need for state promotion in React if you want to update the state of another component in one component (similar to Vue's parallel component passing parameters, or a child component passing parameters to the parent component). Elevate the status to their nearest ancestor component. The Change in the child component triggers a change in the state of the parent component, and the change in the state of the parent component affects the display of another component (because the state passed to another component has changed, which is similar to the $emit () method of the Vue child component).

Thank you for reading, the above is the content of "whether React is two-way data flow". After the study of this article, I believe you have a deeper understanding of whether React is a two-way data flow, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.