发布订阅

 
import PubSub from 'pubsub-js';
 
export function useSubscribe (msg, callback) {
    return PubSub.subscribe(msg, callback);
}
export function usePublish () {
    return PubSub.publish;
}
export function useUnsubscribe () {
    return PubSub.unsubscribe;
}
 

import React, {useEffect} from 'react';
// 引入上面写的usePubSub文件
import {useSubscribe, usePublish, useUnsubscribe} from '../../public/utils/hooks/usePubSub';
 
function Index () {
    const publish = usePublish();
    const unsubscribe = useUnsubscribe();
 
    const update = useSubscribe('update', function (msg: any, data: any) {
        console.log('我收到了,啦啦啦啦', msg, data);
    });
 
    // 切记切记，这步很重要， 要清除更新组件重复订阅的副作用
    useEffect(() => () => {
        unsubscribe(update);
    }, [update]);
 
    return (
        <button onClick={() => {publish('update', '我是数据');}}>点我</button>
    );
}
 

• PubSub