21.React 消息订阅与发布机制

用处：

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

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

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

消息订阅

举个例子：

订阅报纸

• 交钱，说好地址，订阅哪一种报纸
• 邮递员送报纸 订阅消息：
• 消息名称
• 发布消息

使用

很多的库都实现了这种机制，我们用主流使用较多的 PubSub

安装

npm install pubsub-js

yarn add pubsub-js

引入

import PubSub from 'pubsub-js';

 

实现

在父组件中发布（App），在子组件中订阅 （Data）

App （父）组件

class App extends React . Component  {
  componentDidMount() {
  // publish 发布消息 消息名为：publish_one 内容为：This is publish
      PubSub.publish("publish_one","This is publish")
  }
  render() {
    return (
      <div className = 'ArticleContainer'>
        <Data/>
      </div>
    )
  }
}

Data（子）组件

lass Data extends React.Component{
  state={
    publishData:''
  }
  componentDidMount(){
   // 订阅消息 消息名：publish_one  第二个参数是一个函数
   // 此函数又有两个参数：消息名和消息数据
    PubSub.subscribe("publish_one",(msg,data)=>{
      this.setState({publishData:data})
    })
  }
  render(){
    return(
    <div>
      {this.state.publishData}
    </div>)
  }
}

定义token

 我们去GitHub中查看其文档，可以发现他将subscribe定义变量成token，这就好比定时器方法的使用一样。为了我们取消定时器/订阅。

componentDidMount(){
    this.token = PubSub.subscribe('publish_one',(msg,data)=>{
       this.setState({publishData:data})
    })
}

取消订阅

为了节约资源，我们有时需要取消订阅。我们定义的token变量就有用处了

componentWillUnmount(){
     PubSub.unsubscribe(this.token)
 }