如何实现两个挂载到不同DOM根的独立React应用间的主动通信？

核心思路：使用观察者模式实现全局共享状态总线 #

这是无额外依赖、侵入性最低、性能最优的方案，完全避开了必须公共父组件包裹才能用Context的限制，适配所有React版本。

实现步骤 #

1. 首先创建全局唯一的共享状态实例，内置订阅、发布、状态读写能力

// 单独模块存储即可，无需挂载到window也可通过ES模块导出共享
const createSharedStore = (initialState = {}) => {
  let currentState = Object.freeze({ ...initialState });
  const listeners = new Set();

  return {
    // 读取状态，返回快照避免直接修改原数据
    getState: () => ({ ...currentState }),
    // 更新状态，支持传入partial对象
    setState: (update) => {
      currentState = Object.freeze({ ...currentState, ...update });
      // 通知所有订阅的组件更新
      listeners.forEach(listener => listener());
    },
    // 订阅状态变化，返回取消订阅方法
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    }
  };
};

// 导出唯一实例，两个React应用共享同一个store
export const sharedAppStore = createSharedStore({
  // 初始共享数据定义
  commonInfo: null,
  notifyCount: 0
});

2. 在两个应用中封装自定义Hook接入共享状态

React 18+ 版本推荐用官方useSyncExternalStore，避免渲染撕裂问题

import { useSyncExternalStore } from 'react';
import { sharedAppStore } from './sharedStore';

export const useSharedStore = () => {
  const state = useSyncExternalStore(
    sharedAppStore.subscribe,
    sharedAppStore.getState
  );
  return [state, sharedAppStore.setState];
};

React 18 以下版本用useEffect + useState实现

import { useState, useEffect } from 'react';
import { sharedAppStore } from './sharedStore';

export const useSharedStore = () => {
  const [state, setState] = useState(sharedAppStore.getState());

  useEffect(() => {
    // 订阅状态变化，更新本地state触发重渲染
    const unsubscribe = sharedAppStore.subscribe(() => {
      setState(sharedAppStore.getState());
    });
    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe;
  }, []);

  return [state, sharedAppStore.setState];
};

3. 直接在两个应用的组件中使用即可

// ReactApp1 中修改共享状态
function ReactApp1() {
  const [, setSharedState] = useSharedStore();

  const handleDataUpdate = () => {
    setSharedState({ commonInfo: '来自App1的新数据', notifyCount: 1 });
  };

  return <button onClick={handleDataUpdate}>更新共享数据</button>;
}

// ReactApp2 中自动响应共享状态变化
function ReactApp2() {
  const [sharedState] = useSharedStore();
  return (
    <div>
      <p>收到的共享数据：{sharedState.commonInfo}</p>
      <p>通知次数：{sharedState.notifyCount}</p>
    </div>
  );
}

备选方案 #

方案1：复用全局状态库实例 #

如果项目已经接入了Zustand/Redux等支持脱离React上下文使用的全局状态库，可以直接让两个应用引用同一个store实例，无需额外改造，成本最低。

方案2：原生CustomEvent事件通信 #

仅需要单次事件通知、不需要持久化状态的场景可以用这个方案，实现最快：

// App1 派发事件
window.dispatchEvent(new CustomEvent('app:sharedDataUpdate', {
  detail: { newData: '通知内容' }
}));

// App2 监听事件
useEffect(() => {
  const handleUpdate = (e) => {
    console.log('收到更新:', e.detail.newData);
    // 更新本地state触发渲染
  };
  window.addEventListener('app:sharedDataUpdate', handleUpdate);
  return () => window.removeEventListener('app:sharedDataUpdate', handleUpdate);
}, []);

选型建议 #

优先选择自定义共享状态总线的方案，没有第三方依赖，支持状态持久化，也不存在CustomEvent的事件冒泡、数据序列化等限制，适用所有场景。

内容的提问来源于stack exchange，提问作者Manoj Sreekumar