React中发布与订阅模式

一，用处

• 当我们想要父组件传值给子组件时，通常会使用props传值。
• 子组件传值给父组件时，通常会子组件中的事件触发一个回调函数（也是props），父组件中的对应函数再去修改值。
• 兄弟组件间传值，我通常会将子组件A的值传回父组件，父组件再传给子组件B

以上三种情况都可以使用消息订阅与发布机制来解决。

• 当然父传子还是用props比较好。
• 子组件传值给父组件，在子组件中发布，在父组件中订阅，就可以拿到相应的值
• 兄弟组件间传值，在子组件A中发布，在子组件B中订阅

二，安装

yarn add pussub-js

npm install pubsub-js 

三，引入

import PubSub from 'pubsub-js'

四，使用

这里演示在兄弟组件中进行传值操作

接收：

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class pubsub1 extends Component {
  state={
    name:'张三',
    age:12,
    work:"IT"
  }
  // 做一些初始化的工作
  componentDidMount(){
    // 消息的订阅传两个参数，第一个订阅名，第一个参数是订阅名,第二个参数是要传递的内容
    PubSub.subscribe('zqn',(mag,data) => {
  console.log('接收到收据'+msg,data);
  
    })
  }
  render() {
    return (
      <div>pubsub1</div>
    )
  }
}

发送： 

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class pubsub2 extends Component {
   state={
    name:'张三',
    age:12,
    work:"IT"
  }
  emit=() => {
   PubSub.publish('zqn',this.state.name)
    
  }
  render() {
    return (
      <div>
        <p>这是发送</p>
        <button onClick={this.emit}>点击发送</button>
      </div>
    )
  }
}