如何用JavaScript实现状态管理_发布订阅模式如何工作

幻影之瞳 2026-01-01 00:00:00 次阅读

发布订阅模式解耦状态变更与响应逻辑，避免全局变量导致的UI不同步；EventEmitter是轻量实现基底，需注意事件命名隔离、错误捕获及组件卸载时手动取消订阅。

状态管理为什么需要发布订阅模式

直接用全局变量或 Object 存状态，改一处、忘了通知依赖方，UI 就不同步。发布订阅（Pub/Sub）把“谁改了状态”和“谁要响应”解耦——状态变更只负责 publish，组件只管 subscribe，中间靠事件中心转发。

`EventEmitter` 是最轻量的实现基底

浏览器原生没有 EventEmitter，但 Node.js 有；前端自己写一个 20 行内就能跑起来，比引入全家桶更可控。

class EventEmitter {
  constructor() {
    this.events = {};
  }
  subscribe(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  }
  unsubscribe(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

subscribe 和 publish 不要求先后顺序：先 publish 后 subscribe 会丢消息，这是设计使然，不是 bug
如果需要“历史状态回放”，得额外加 lastValue 缓存，比如 RxJS 的 BehaviorSubject
多个同名 event 共享一个回调队列，别误以为是“每个实例独立”

在 React 中用 `useEffect` + `subscribe` 绑定组件生命周期

手动 unsubscribe 很容易漏，尤其组件卸载后回调还在执行，会报 Cannot update a component while rendering。

必须在 useEffect 清理函数里调用 unsubscribe
避免闭包捕获过期的 state，用 ref 或 setState 函数式更新
不要在 publish 里传大对象，深拷贝开销大；推荐传 id 或 diff 字段

function Counter() {
  const [count, setCount] = useState(0);
  const eventBus = useRef(new EventEmitter()).current;

  useEffect(() => {
    const handler = (data) => setCount(prev => prev + data.delta);
    eventBus.subscribe('counter:update', handler);
    return () => eventBus.unsubscribe('counter:update', handler);
  }, []);

  const handleClick = () => eventBus.publish('counter:update', { delta: 1 });

  return ;
}