React communication between data streams and components

Today, we summarize the communication between the one-way data stream and the components of react.

First of all, I think the biggest benefit of using react is the functional component , which adheres to the principle of front-end maintainability.

Let's introduce one-way data flow.

REACT unidirectional Data Flow :

React is a unidirectional stream of data that is passed from parent to child nodes ( through props).

If a props of the top level (parent) changes, react will render all the child nodes again.

Just now we mentioned props, how to understand props?

Props:

is the abbreviation of the property props, which can be understood as the attribute of the HTML tag.

  you can not use thethis.propsdirect modification of propsbecauseprops是read-only , whichpropsis used to pass data and configuration throughout the component tree.

In the current component accessprops, usethis.props.

The props code is posted here:

* Data is a simulation with no specific meaning and is provided for illustrative purposes only.

Next, state.

State:

  Each component has its ownstate,stateandpropsthe difference is that the former (state) exists only within the component, and the state value can only be modified from the current component this.setState invocation ( cannot be modifiedthis.state！directly ）。

  In General, we update the subcomponents by changing thestatevalues to update the values of the new sub-components topropsachieve the update.

Let's give an example:

  

This uses getinitialstate to initialize the state, where state is text and then reads the state value through This.state.text

Props and State:

Use aspropsa data source whenever possible,stateto hold state values (simple data).

In other words, we usually use props to pass a lot of data, state is used to store some simple definition data inside the component. (You can feel this by using a lot of react)

So, the principle of unidirectional data flow and some of the concepts we have finished, let us look at how the components of the communication between:

In general, there are two ways of communicating:

I. Parent-child component communication

  In react, the most common component communication is the father and son, the general situation is:

  * Parent Component Update Component Status-----Props-----> Sub-component Update

  Another scenario is:

  * subcomponents Update parent Component State-----need parent component to pass callback function -----> Child component Call trigger

  You may not understand the situation where the second seed component updates the state of the parent component:

   So, in general, only the parent component can pass the data to the subcomponents through props, so that the subcomponents are updated, and now we want to implement

The child component updates the parent component by requiring the parent component to pass a callback function through props to the child component, which can update the parent component , the child component is the

By triggering this callback function, the parent component is updated. (similar to a trickery approach)

The sub-components are posted here to update the parent component code:

In this example, Refreshbox is a callback function created by the parent component that passes it into the son component and then invokes the trigger through the son component.

The state is then changed to implement the child component's update to the parent component.

Second, brother component communication

When two components are at the same level (at the same parent, or at the same primary level), they are called sibling components.

There are two ways to achieve this:

Way One:

According to react one-way data flow, we need to pass the parent component to change the sibling component through the Parent component callback function props.

In fact, this implementation is similar to the way Subcomponents Update parent component State .

Way two:

  Mode one applies only when the component hierarchy is very low, and when the component level is very deep, the efficiency of the communication becomes lower.

Here, the react official gives us a contextual way of allowing subcomponents to directly access the ancestors ' data or functions without having to pass data from one ancestor component to the subassembly at a level.

However, this approach is recommended for on-demand use and may cause some unexpected errors. (such as data transfer logical structure is not clear)

   Here is an example of a direct sticker:

  

To illustrate the use of objects first, Box.childcontexttype is such a context declaration, when a child component calls the method of the ancestor component,

by this.context.[ CALLBACK] This makes it possible to communicate between ancestors and sub-components.

Summary: Today summarizes the concept of unidirectional data flow and the communication between components, I hope you can see the react some basic principles have a deeper understanding, there is a mistake in the local message I, I correct.

Disclaimer: This article only do personal study use, prohibit reprint!

(the views quoted in this paper are from 1190000006831820 nanges)

React communication between data streams and components