使用 MsgCenter

MsgCenter 采用发布 / 订阅模式设计，主要使用场景： 跨组件通信（不建议在工作台中使用，工作台开发自带专用的通信）

一、 发布事件

/**
* topic 发布事件
* resultObj 发布数据
* return 发布结果 true / false 
*/
msgCenter.publish(topic, resultObj);

// class 组件
import React, { Component } from 'react';
import { msgCenter } from '@gza/quantex-utils';

class Publish extends Component{
    handleChange = () => {
        ...
        msgCenter.publish('menu-collapse', { collapse: 1});
    }
    render(){
        return  (
            <>
                <Button onClick={this.handleChange}> 发布事件 </Button>
            </>  
        )
    }
};

// 函数组件
import React, { useEffect } from 'react';
import { msgCenter } from '@gza/quantex-utils';

const Publish= () => {
    handleChange = () => {
        ...
        msgCenter.publish('menu-collapse', { collapse: 1});
    }
    return  (
        <>
            <Button onClick={this.handleChange}> 发布事件 </Button>
        </>  
    )
};

二、 订阅事件 / 取消订阅

/**
* topic 订阅事件
* func 订阅函数
* return 订阅token
*/
msgCenter.subscribe(topic, func);


/**
* token 订阅token
*/
msgCenter.unsubscribe(token);

// class 组件
import React, { Component } from 'react';
import { msgCenter } from '@gza/quantex-utils';

class Subscribe extends Component{
    msgToken = null;
    componentDidMount() {
        this.msgToken = msgCenter.subscribe('menu-collapse', (topic, data) => {
             console.log(data);
        });
    }
    componentWillUnmount() {
        // 取消订阅，特别重要，否则可能会造成内存泄露，甚至影响功能
        msgCenter.unsubscribe(this.msgToken);
    }
};

//  函数组件
import React, {useEffect} from 'react';
import { msgCenter } from '@gza/quantex-utils';

const Subscribe= () =>{
    let msgToken = null;
    useEffect(()=>{
        msgToken = msgCenter.subscribe('menu-collapse', (topic, data) => {
             console.log(data);
        });
        return () => {
            // 取消订阅，特别重要，否则可能会造成内存泄露，甚至影响功能
            msgCenter.unsubscribe(msgToken);
        }   
    },[]) // 使用[],建议只执行一次
};