PubSubJS 使用说明文档

PubSubJS 使用说明文档

📌 简介

PubSubJS 是一个轻量级的发布/订阅（Publish–Subscribe）模式库，用于组件之间的消息通信。
适用于 React、Vue、Node、原生 JS 等环境，尤其适合无直接关系的组件通信或全局事件管理。

项目地址（官方）：github.com/mroderick/P…

---

📦 安装

npm install pubsub-js
# 或
yarn add pubsub-js
# 或
pnpm add pubsub-js

---

🚀 快速上手

发布（Publish）

import PubSub from "pubsub-js";

PubSub.publish("eventName", { msg: "Hello PubSub" });

订阅（Subscribe）

import PubSub from "pubsub-js";

const token = PubSub.subscribe("eventName", (msg, data) => {
  console.log(msg, data);
});

// 取消订阅
PubSub.unsubscribe(token);

---

🎯 React 中的典型使用方式

1. 组件 A 发布消息

// ComponentA.jsx
import PubSub from "pubsub-js";

function ComponentA() {
  const sendMessage = () => {
    PubSub.publish("update-list", { refresh: true });
  };

  return <button onClick={sendMessage}>刷新列表</button>;
}

export default ComponentA;

---

2. 组件 B 订阅消息

// ComponentB.jsx
import { useEffect } from "react";
import PubSub from "pubsub-js";

function ComponentB() {
  useEffect(() => {
    const token = PubSub.subscribe("update-list", (msg, data) => {
      console.log("收到消息：", data);
      // 执行刷新列表逻辑...
    });

    return () => {
      PubSub.unsubscribe(token); // 必须取消订阅
    };
  }, []);

  return <div>我是列表组件</div>;
}

export default ComponentB;

---

🪝 自定义 Hook（推荐）

更优雅的 React 写法：

import { useEffect } from "react";
import PubSub from "pubsub-js";

export const useSubscribe = (topic, handler) => {
  useEffect(() => {
    const token = PubSub.subscribe(topic, handler);
    return () => PubSub.unsubscribe(token);
  }, [topic, handler]);
};

使用：

useSubscribe("update-list", (msg, data) => {
  console.log("收到刷新事件", data);
});

---

🔥 常见使用场景

场景	描述
兄弟组件通信	无需 props/state，直接全局事件
全局 Loading、Toast	任意页面通知全局 UI
列表刷新	新增/编辑后通知列表重新请求数据
跨页面事件管理	比如 tab 页面之间的通知

---

⚠️ 注意事项

✔ 必须在组件卸载前取消订阅

否则会导致：

• 内存泄漏
• 多次重复触发订阅回调
• 组件卸载后仍然执行逻辑（严重 bug）

示例（React）：

useEffect(() => {
  const token = PubSub.subscribe(...);
  return () => PubSub.unsubscribe(token);
}, []);

---

📚 API 参考（精简版）

PubSub.subscribe(topic, callback)

订阅某个主题。
返回 token，用于取消订阅。

PubSub.publish(topic, data)

发布消息，所有订阅者都会收到。

PubSub.unsubscribe(token or topic)

取消订阅，可用于：

• 指定 token（推荐）
• 指定 topic（取消整个主题下所有订阅）

---

🧩 示例：业务封装（可选）

可封装成统一事件常量：

// eventTypes.js
export const EVENTS = {
  UPDATE_LIST: "update-list",
  OPEN_MODAL: "open-modal",
  GLOBAL_LOADING: "global-loading",
};

使用：

PubSub.publish(EVENTS.UPDATE_LIST);
PubSub.subscribe(EVENTS.UPDATE_LIST, handler);

---

✅ 总结

PubSubJS 是实现轻量级跨组件通信的绝佳方式，特点：

• 无侵入、简单高效
• 特别适合兄弟组件、深层组件通信
• 特别适合全局事件（loading、toast、刷新通知等）
• 使用时记得取消订阅即可避免问题