react当中组件数据传输方式之（pubsub-js）

第三方中间件 pubsub-js

功能：任意组件之间通讯，一对多，多对多

说明：pubsub-js一个居于发布/订阅模式的一个中间件

概念：绑定事件监听 === 订阅消息，触发事件 ====发布消息

安装命令：npm i pubsub-js

使用方式：

发送消息：PubSub.publish(名称,参数)

订阅消息：PubSub.subscrib(名称,函数)

取消订阅：PubSub.unsubscrib（发布者函数）

详细代码示例如下：

A组件

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './A.css'
export default class Acomponent extends Component {
  state={
    data:{name:'A组件的信息',keyVal:'B组件你的身份已经泄密,请火速转移位置脱离危险'}
  }
  handler=()=>{
    //A组件发布消息
    PubSub.publish('name',this.state)
  }
  render() {
    return (
      <div className='Acomponent'>
        Acomponent<br/>
        <button onClick={this.handler}>A组件</button>
      </div>
    )
  }
}

B组件

import React, { Component } from 'react'
import './B.css'
import PubSub from 'pubsub-js'
export default class Bcomponent extends Component {
  state = {
    data:{}
  }

  componentDidMount() {
    //订阅消息
    this.token = PubSub.subscribe('name', (mes, data) => {
      console.log(mes, data);
      this.setState(data)
    })
  }

  //组件要卸载时取消订阅事件
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }
  render() {
    const {keyVal} = this.state.data
    return (
      <div className='Bcomponent'>
        Bcomponent<br />
        <textarea name="" id="" cols="30" rows="10" value={keyVal} defaultValue={'B组情报接受处件'}></textarea>
      </div>
    )
  }
}