React组件通信——发布订阅（pub/sub）

一、介绍

PubSubJS 是一个轻量级的发布-订阅(publish-subscribe)模式库，可以在 React 应用中实现组件间的松耦合通信，特别适合非父子组件或远房组件间的消息传递。

 推荐使用的情况：

• 通信双方不需要知道彼此存在

• 一对多的消息分发需求

• 需要降低系统耦合度

• 需要支持未来未知的订阅者

• 跨团队/跨模块协作开发

二、示例

安装 PubSubJS

npm install pubsub-js

1. 发布消息 (Publish)

import PubSub from 'pubsub-js';function PublisherComponent() {const handleClick = () => {// 发布名为 'TOPIC_NAME' 的消息，附带数据PubSub.publish('TOPIC_NAME', { data: '这是要传递的数据',timestamp: Date.now()});};return (<button onClick={handleClick}>发布消息</button>);
}

2. 订阅消息 (Subscribe)

import React, { useEffect } from 'react';
import PubSub from 'pubsub-js';function SubscriberComponent() {useEffect(() => {// 订阅消息const token = PubSub.subscribe('TOPIC_NAME', (msg, data) => {console.log('收到消息:', msg, data);});// 组件卸载时取消订阅return () => {PubSub.unsubscribe(token);};}, []);return <div>订阅者组件</div>;
}