React 发布-订阅机制实现组件间信息通信 2

川长思鸟来 2022-11-20 09:50 142阅读 0赞

本篇主要是承接上一文对发布-订阅模式，以具体在React中使用案例PubSubJS来理解此原理。

PubSubJS官方Github链接： [https://github.com/mroderick/PubSubJS][https_github.com_mroderick_PubSubJS]

1. 安装包

> npm install pubsub-js

2. 在React项目中引入包

> import PubSub from 'pubsub-js'

3. 重点使用的函数

> 发送消息：PubSub.publish(名称,参数)
> 
> 订阅指定消息：PubSub.subscrib(名称,函数) 
> 
> 取消指定订阅：PubSub.unsubscrib(名称)
> 
> 取消所有订阅：PubSub.clearAllSubscriptions()

4. 使用方法

> var mySubscriber = function (msg, data) \{  
>     console.log( msg, data );  
> \};
> 
> // 订阅消息  
> var token = PubSub.subscribe('MY TOPIC', mySubscriber);  
>   
> // 异步发布消息  
> PubSub.publish('MY TOPIC', 'hello world!');
> 
> // 同步发布消息
> 
> PubSub.publishSync('MY TOPIC', 'hello world!');
> 
> // 取消订阅
> 
> PubSub.unsubscribe(token);
> 
> PubSub.clearAllSubscriptions();

注意：所对应的发布-订阅有相同的名称，才能匹配起来。

5. 案例

// 导入
    import PubSub from "pubsub-js"
    
    // 在有数据的地方进行发布
    class Data extends React.Component{
      pubmsg = ()=>{
          PubSub.publish("频道","频道发布的消息")
      }
      render() {
          return(
              <button onClick={this.pubmsg}>Data组件,发布消息</button>
              )
          }
      }
      
    // 订阅
    class App extends Component {
        // 组件将要被渲染的时候进行订阅
        componentDidMount() {
          PubSub.subscribe("频道", (msg,data)=> {
            console.log(msg,data)
          })
        }
      
        render() {
          return (
            <div className="App">
               <Data />
            </div>
          );
        }
      }

注意：PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。

参考资料：

1.  [https://github.com/mroderick/PubSubJS][https_github.com_mroderick_PubSubJS]

2. [https://blog.csdn.net/zfan520/article/details/78612088][https_blog.csdn.net_zfan520_article_details_78612088]

[https_github.com_mroderick_PubSubJS]: https://github.com/mroderick/PubSubJS
[https_blog.csdn.net_zfan520_article_details_78612088]: https://blog.csdn.net/zfan520/article/details/78612088