Problem description

As we know, there are various communication modes for react components. In project development, we need to flexibly select appropriate communication modes based on project complexity, specific service functions, and component hierarchy. This article Outlines common ways for parent and sibling components to communicate. Other react communication methods (Context, Mobx, redux, etc.) will be reclassified later.

Parent component communication (parent to child, child to parent)

demand

Let’s say we have this need

  • Click the button to open the popup (Parent to Child)
    • Here’s the idea:
    • The child component has a pop box (component). The parent component passes an identity to the child component, using props, to control whether the pop box pops up
    • The child component controls whether to open the popbox based on this identifier
  • Close the popbox and display the closed position on the page (child to parent)
    • Here’s the idea:
    • Because you need to distinguish between clicking cancel and clicking OK to close the popup (clicking the cross is also the same thing as clicking cancel)
    • So in the child component by calling the function from the parent component and passing different arguments to tell the parent component is clicking on the closed box
    • Of course, the parent component passes a function in advance so that the child component can call it

rendering

Code graphic analysis

conclusion

  • The parent component passes the child component data, which is accepted and used by the props
  • The child component passes a function to the parent component, so that the child component can call the function and pass the data in the child component to the parent component when appropriate

Sibling communication mode parent component transfer (not recommended)

Train of thought

  • Since sibling components cannot communicate directly, consider finding a relay to communicate.
  • Because sibling components have a common parent, the relay station selects the parent and the data is stored in the parent.
  • So the originalBrother A === brother BThe data flow becomesSibling A === parent component === brother B, that is, add a layer

demand

Let’s say we have this need

  • In the paper Book component (Toptop), there is a button that you can click to increase the number of e-books by one
  • There is also a button in Bottombottom that increases the number of paper books by one

rendering

Code graphic analysis

conclusion

This is not very convenient to do through the parent component, the actual development project, rarely use this method, just understand

Pubsub.js Message Subscription publishing (recommended)

It is worth mentioning that this plug-in can also be used in VUE because it is written in native JS

demand

The requirement for this case is similar to the parent component transition case above, which is to click a button in one component to change the state of another component. Let’s take a look at the renderings

rendering

Code graphic analysis

The first step is definitely to download PubSub

npm install pubsub-js --save

Introduce NPM official: www.npmjs.com/package/pub…

Don’t forget to unsubscribe

Note that in the example above, the actual writing is not perfect, because the componentDidMount hook subscribed to the message after the component is mounted, so when the component is about to be unmounted, the componentWillUnmount hook needs to unsubscribe from the event subscription. The simplified code is as follows:

// The component mounts the subscription message
componentDidMount() {
    this.token = PubSub.subscribe("wantAddOneFromPaper".(msg, data) = > {
       // ...})}// Component unloads unsubscribe messages
componentWillUnmount() {
	PubSub.unsubscribe(this.token)
}
Copy the code

conclusion

This publishing and subscription mode is a common sibling component communication method in development at present. Of course, pubsub.js is not only applicable to sibling component communication, in fact, any level, any relationship of component communication, pubsub can use publish and subscribe communication, very powerful.