五、【React脚手架】消息订阅与发布

1、插件简介

1. 工具库：PubSubJS
2. 下载：yarn add pubsub-js
3. 使用：
   1. 引入：import PubSub from 'pubsub-js'
   2. 订阅：var messageId = PubSub.subscribe('delete', function(data){ })
   3. 取消订阅：PubSub.unsubscribe(messageId )
   4. 发布：PubSub.publish('delete', data)

2、Demo

2.1、项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jvs4jj2e-1669626462065)(C:\Users\Administrator\Desktop\学习笔记\react_脚手架.assets\image-20221128163745052.png)]

2.2、CODE

2.2.1、App.js

import React, { Component } from 'react'
import A from './components/A'
import B from './components/B'

export default class App extends Component {

  render() {
    return (
      <div>
        <A />
        <B />
      </div>
    );
  }
}

2.2.2、A.jsx

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

export default class A extends Component {

    render() {
        return (
            <div>
                <button onClick={() => PubSub.publish('A_Pub', '这是A发布的一条消息')}>A发布消息</button>
            </div>
        )
    }
}

2.2.3、B.jsx

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

export default class B extends Component {
    state = {
        message: ''
    }
    componentDidMount() {
        PubSub.subscribe('A_Pub', (_, message) => this.setState({ message }))
    }
    render() {
        return (
            <div>B接收的消息：{this.state.message}</div>
        )
    }
}

2.3、Result