React - 兄弟互传 - 消息订阅 - 发布机制

编程语言 2025-04-09 20:06:38 阅读次数: 0

pubsub-js 是一个轻量级的 JavaScript 库，用于实现发布-订阅（Pub/Sub）模式。该模式使得组件间的通信变得简单和高效，特别适用于 React 中的兄弟组件之间通信。通过 pubsub-js，一个组件可以发布消息，其他组件可以订阅这些消息以获得更新。

1.安装 pubsub-js

npm install pubsub-js
//或者
yarn add pubsub-js

2.基本概念

发布（Publish）: 发布一个消息到一个特定的主题 / 名称。
订阅（Subscribe）: 订阅一个特定的主题，以便接收相应的消息。
取消订阅（Unsubscribe）: 可以取消对某个主题的订阅，以停止接收消息。

3.使用示例

// 主组件 
import React from 'react';
import BrotherA from './BrotherA';
import BrotherB from './BrotherB';

const App = () => {
    return (
        <div>
            <BrotherA />
            <BrotherB />
        </div>
    );
};

export default App;

// BrothrA 组件
import React from 'react';
import PubSub from 'pubsub-js';

const BrotherA = () => {
    const sendMessage = () => {
        PubSub.publish('BROTHER_MESSAGE', '你好，这是A组件发过来的');
    };

    return (
        <div>
            <button onClick={sendMessage}>给B组件发送消息</button>
        </div>
    );
};

export default BrotherA;

// BrotherB 组件
import React, { useEffect, useState } from 'react';
import PubSub from 'pubsub-js';

const BrotherB = () => {
    const [message, setMessage] = useState('');

    useEffect(() => {
        // 订阅消息
        const token = PubSub.subscribe('BROTHER_MESSAGE', (msg, data) => {
            setMessage(data);
        });

        // 清理订阅
        return () => {
            PubSub.unsubscribe(token);
        };
    }, []);

    return <div>Received Message: {message}</div>;
};

export default BrotherB;

4.代码说明

BrotherA 组件:
- 使用 PubSub.publish 方法发送一条消息，主题为 'BROTHER_MESSAGE'，消息内容为 '你好，这是A组件发过来的'。

BrotherB 组件:
- 在组件挂载时，使用 PubSub.subscribe 方法订阅 'BROTHER_MESSAGE' 的主题。当接收到这个主题的消息时，更新 message 状态。
- 在 useEffect 的清理函数中，使用 PubSub.unsubscribe 取消订阅，避免内存泄漏。

5.常用的API

方法	描述
`PubSub.publish(topic, data)`	发布一条消息到指定主题，即名称。
`PubSub.subscribe(topic, callback)`	订阅一个主题，并提供一个回调函数处理消息。
`PubSub.unsubscribe(token)`	取消订阅，通过 `subscribe` 返回的 token。