react多层级组件通讯跨组件通讯，传参，react hooks使用pubsub（发布订阅）

在react中跨多层级组件通讯通过传参太麻烦了，所以我就采用了发布订阅模式来跨组件通讯，选用的pubsub-js

在react直接使用pubsub是有问题的，一不小心就会重复订阅，导致多次执行，这肯定不是我们想要的效果

所以在pubsub-js的基础上封装了个PubSub hook ，下面看代码

新建一个usePubSub.js的文件

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;
}

接下来就是使用 PubSubHook

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文档在这里，https://www.npmjs.com/package/pubsub-js

后面还可以根据自己的需求封装，

 

各位csdn姥爷，好用给老弟点个赞，爱你么么哒～