如何在非Single SPA的React 16.14.0应用中挂载Single SPA MFE

这个方案完全可行，无需对现有React 16.14应用做架构级破坏性改造，即可将Single SPA开发的微前端（MFE）作为DOM元素挂载，并以React组件的方式实现交互。以下是具体实现步骤、交互方式及关键注意事项：

一、核心实现步骤 #

1. 引入必要依赖 #

安装single-spa及对应MFE框架的适配器（如MFE为React则用single-spa-react，Vue则用single-spa-vue），注意版本兼容：

• 针对React 16.14，选择single-spa-react@4.x版本（5.x及以上适配React 18，可能引发冲突）
• 执行安装命令：

npm install single-spa single-spa-react@4.x

2. 封装MFE挂载的React组件 #

创建一个通用的MfeWrapper组件，负责MFE的注册、挂载与卸载逻辑，示例如下（基于React Hooks）：

import { useEffect, useRef } from 'react';
import { mountRootParcel, registerApplication, start } from 'single-spa';

// 全局仅启动一次single-spa
let singleSpaInitiated = false;

const MfeWrapper = ({ appName, appEntry, passProps }) => {
  const containerRef = useRef(null);
  const parcelInstance = useRef(null);

  useEffect(() => {
    // 初始化single-spa
    if (!singleSpaInitiated) {
      start();
      singleSpaInitiated = true;
    }

    // 注册MFE应用
    registerApplication({
      name: appName,
      app: () => System.import(appEntry), // 若MFE用ES模块打包，也可替换为 import(appEntry)
      activeWhen: () => true, // 因手动挂载，设为始终激活
    });

    // 挂载MFE到组件容器
    if (containerRef.current) {
      parcelInstance.current = mountRootParcel(
        () => System.import(appEntry),
        {
          domElement: containerRef.current,
          props: passProps,
        }
      );
    }

    // 组件卸载时清理MFE
    return () => {
      if (parcelInstance.current) {
        parcelInstance.current.unmount();
      }
    };
  }, [appName, appEntry, passProps]);

  return <div ref={containerRef} className="mfe-container" />;
};

export default MfeWrapper;

3. 在现有应用中使用组件 #

直接在需要嵌入MFE的位置引入MfeWrapper，传入MFE名称、入口地址及需传递的props：

import MfeWrapper from './MfeWrapper';

const App = () => {
  return (
    <div className="host-app">
      {/* 嵌入MFE */}
      <MfeWrapper
        appName="user-profile-mfe"
        appEntry="http://your-mfe-domain/user-profile.js"
        passProps={{ userId: 123, theme: 'dark' }}
      />
    </div>
  );
};

二、React组件与MFE的交互方式 #

1. Props传递 #

通过passProps参数向MFE传递数据，MFE可在Single SPA生命周期钩子中接收：

// MFE的mount钩子示例（React MFE）
export function mount(props) {
  const { userId, theme } = props;
  // 使用props初始化MFE
  ReactDOM.render(<Profile userId={userId} theme={theme} />, props.domElement);
}

2. 自定义事件通信 #

通过浏览器自定义事件实现双向通信，避免全局变量污染：

• 宿主向MFE发送消息：

// 宿主组件内
const sendEventToMfe = () => {
  containerRef.current.dispatchEvent(
    new CustomEvent('host-update', { detail: { userStatus: 'active' } })
  );
};

• MFE监听并回复宿主：

// MFE的mount钩子中
export function mount(props) {
  const domEl = props.domElement;
  // 监听宿主事件
  domEl.addEventListener('host-update', (e) => {
    console.log('Received from host:', e.detail);
    // 向宿主发送回复
    domEl.dispatchEvent(
      new CustomEvent('mfe-response', { detail: { status: 'updated' } })
    );
  });
}

• 宿主监听MFE回复：

// 宿主组件useEffect中
useEffect(() => {
  const handleMfeResponse = (e) => {
    console.log('Received from MFE:', e.detail);
  };
  containerRef.current.addEventListener('mfe-response', handleMfeResponse);
  return () => containerRef.current.removeEventListener('mfe-response', handleMfeResponse);
}, []);

3. 共享状态（可选） #

若需复杂状态共享，可采用以下方式：

• 共享全局状态库实例：如宿主与MFE共用同一个Redux/MobX实例，需确保库版本一致，避免重复加载
• 谨慎使用window对象：仅适用于简单场景，易造成全局污染，不推荐大型应用使用

三、关键注意事项 #

• 版本兼容：严格匹配single-spa及适配器版本与React 16.14，避免hooks或生命周期冲突
• 样式隔离：MFE需做样式隔离，可采用Shadow DOM、CSS Modules、BEM命名规范，或配置Single SPA的style-loader实现样式沙箱
• 错误处理：为MFE挂载、卸载过程添加错误捕获，如：

// 在mountRootParcel后添加错误处理
parcelInstance.current.mountPromise.catch((err) => {
  console.error('MFE挂载失败:', err);
  // 显示错误提示
});

• 性能优化：添加MFE加载状态提示；若多个MFE共享依赖，可通过SystemJS共享配置或模块联邦减少重复加载
• 路由冲突：若MFE自带路由，需确保其路由基于宿主的子路径，或手动控制MFE的路由激活状态，避免与宿主路由冲突

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