React summarized inter-component communication

Communication between components

5.1.1 way: Passing through the props

1) common data on the parent component, specific data on their own internal components (state)

2) can pass through the general data and function data props, one layer at a transmission

3) General Data -> parent component subassembly to pass data -> sub-assembly to read data

4) Data Functions -> sub-assembly components pass data to the parent -> child component calls the function

5.1.2 Second way: using a message subscription (subscribe) - release (publish) mechanism

1) tool library: PubSubJS

2) Download: npm install pubsub-js --save

3) Use:

          import PubSub from 'pubsub-js' //引入

          PubSub.subscribe('delete', function(data){ }); //订阅

          PubSub.publish ( 'delete', data) // news release

5.1.3 Three ways: redux

Detail later learning

 

Subscribe to publish examples:

// Import 
Import the PubSub from  " PubSub-JS " 

// publish data where there 
class the Data the extends React.Component { 
  pubmsg = () => { 
      PubSub.publish ( " channel " , " channel announcement " ) 
  } 
  the render () { 
      return (
           <Button the onClick = { the this .pubmsg}> the Data component, announced </ Button> 
          ) 
      } 
  } 
  
  // subscription 
  class the App the extends the component {
     // assembly to be rendered when the subscription 
    componentWillMount () { 
      PubSub.subscribe ("频道", (msg,data)=> {
        console.log(msg,data)
      })
    }
  
    render() {
      return (
        <div className="App">
           <Data />
        </div>
      );
    }
  }