react中实现发布订阅-526互联

1. 安装插件

npm install pubsub-js --save-dev

2. 在需要发布消息的组件引入使用

import pubsub from 'pubsub-js';

...
// 发布消息
pubsub.publish('name','hello world')

3. 在需要订阅消息的组件引入使用

import pubsub from 'pubsub-js';

...
// 发布消息
pubsub.subscribe('name',(_,res)=>{
    console.log(res); // hello world
})

4. 取消订阅

为了节约资源，我们需要取消订阅

...
useEffect(()=>{
    let msg = pubsub.subscribe('name',(_,res)=>{
        console.log(res); // hello world
    })
    return ()=>{  // 组件销毁前执行，相当于componentWillUnmount
        pubsub.unsubscribe(msg); // 取消订阅
    }
},[]) // 第二个参数传入空数组表示只在第一次渲染组件的时候执行一次