Shulou(Shulou.com)06/01 Report--

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

1.Props

The Props method is by far the most common way to pass information between components, and we can pass data from the parent component to its child components when using the props method; and Props is the core function of React and the basics of React.

two。 Example method

We refer to the child component by having the refs in the parent component, and then we can implement the instance method of the child component. This is another way to access child components from the parent component; the code is as follows:

Class Thechild extends React.component {myFunc () {return "he11o";} class TheParent extends React.Component {render () {return ({this.foo = foo;}} / >);} componentDidMount (fvar x = this.foo.myFunc ();}}

3. Callback function

We know how to pass data from our parent component to our child component through methods 1 and 2, but in our parent component we can pass a property to the child component as follows:

Then we are calling this function through the subcomponent, the code is as follows:

This.props.myFunc ()

Finally, we need to declare this function in the subcomponent, as follows:

MyChiid.propTypes = {myFunc: React.PropTypes.func}

In this way, we have finished using the callback function.

4. Event bubbling

The method of event bubbling is not the concept of React, but the event mechanism of DOM in the browser, the method of bubbling event is similar to the callback function; it can also send data from the child component to the parent component. And we can use this approach when we want to capture DOM events from child components in the parent component. The code is as follows:

Class Childcomponent extends React.component {render () {return (This is child component);}} class Parentcomponent extends React.component {handleclick (evt) {console.log (evt.target);} render () {return ();}}

In this string of code, after clicking on the div element in the child component, we can see that the div element is output in the browser's console, because the event listener we defined in the parent component successfully listens to the click event bubbling up from the child component.

5. Parent component

When we use the process, if we need to let two components communicate with each other, then they will certainly have a common parent component, and we can use the above strategy combination, and we just need to use the parent component as the medium of communication, and define the data as the state and methods of the parent component. The code is as follows:

Class Parentcomponent extends React.component {render () {return (

);}}

6. Observer mode

The observer pattern is a software design pattern and has the function of one object to send data to multiple other objects when needed; not only that, this approach applies to all components, parent-child components or peer components when not needed What we usually do is to unsubscribe the subscription event in componentDidMount () by unsubscribing in componentWillUnmount (), and then call the setState () method when we receive the event. And now there are many libraries on the network that can implement the observer mode, such as: PubSubJS,EventEmitter and so on.

7. Global variable

For this method we generally do not use this method, because when we use global variables in this method will need to pay attention to more details, so it is recommended that unskilled partners do not use better, but it is also very practical, but also can save us a lot of time; editor here suggests that you use global variables when using this method to use window. Syntax to clearly define, this can also facilitate our future management and maintenance.

8.Context

The Context method is similar to our first method, props, but instead of passing data from a single child component like the props method, it can provide data for the entire subtree; and Context can only pass data down in the tree (parent component to subtree). It can also be used with callback functions to pass data up (subtree to parent component).

This is the end of the article on "what are the communication methods between react components?" Thank you for reading! I believe you all have a certain understanding of "what are the communication methods between react components". 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.