React中组件通信方式（二）：PubSub订阅与发布

前端时间写了React子组件传值父组件方式：子组件利用props调用父组件的自定义事件，即可实现传值。这种方式的局限性很大，如果我组件嵌套的很深，岂不是相当麻烦？

下面介绍一种不错的方式：PubSub消息订阅与发布

一、安装：

npm i pubsub-js -S

二、使用：
在要使用的组件引入：import PubSub from ‘pubsub-js’
在父组件的componentWillMount钩子函数中订阅消息，要注意this

import React,{Component} from 'react'
import Bar from './components/Bar'
import PubSub from 'pubsub-js'

export default class App extends Component {
  constructor(){
    super();
    this.state = {
      msg:''
    }
  }
  componentWillMount(){
    // 订阅消息
    PubSub.subscribe('msg',(msg,data) => {
      this.setState({
        msg:data
      })
    })
  }
  render(){
    let {msg} = this.state
    return (
      <div>
        <Bar/>
        <p style={{color:'red'}}>我是订阅的结果：{msg}</p>
      </div>
    )
  }
}

在子组件的自定义方法中发布消息：

import React,{Component} from 'react'
import PubSub from 'pubsub-js'

export default class Bar extends Component {
  constructor(){
    super()
  }
  sendMsg = () => {
    // 发布消息
    PubSub.publish('msg',`我是发布的随机数：${parseInt(Math.random()*1000)}`)
  }
  render(){
    return(
      <div>
        <button onClick={this.sendMsg}>发布消息</button>
      </div>
    )
  }
}

三、演示：

四、链接：
PubSubJS：https://github.com/mroderick/PubSubJS