Modern.js 微前端架构中 useModuleApps 的核心用法解析

概述

在现代前端开发中，微前端架构已经成为解决大型应用复杂性的重要方案。Modern.js 框架提供了强大的微前端支持，其中 useModuleApps 是一个关键 React Hook，它允许主应用灵活地加载和控制微前端子应用。

核心概念

useModuleApps 是 Modern.js 微前端插件提供的一个 React Hook，它返回一个包含所有已注册子应用 React 组件的对象。每个子应用都会被封装成一个标准的 React 组件，可以在主应用中像使用普通组件一样使用它们。

基本用法

1. 引入 Hook

首先需要在主应用中引入这个 Hook：

import { useModuleApps } from '@modern-js/plugin-garfish/runtime';

2. 配置子应用

在 Modern.js 配置文件中定义微前端子应用：

defineConfig(App, {
  masterApp: {
    apps: [
      {
        name: 'Home',  // 这个名称会作为返回对象的属性名
        entry: 'http://127.0.0.1:8081/',
      },
      {
        name: 'Contact',
        entry: 'http://localhost:8082',
      },
    ],
  },
});

3. 使用子应用组件

在组件中使用 useModuleApps 获取子应用组件：

function App() {
  const { Home, Contact } = useModuleApps();

  return (
    <div>
      <h1>主应用</h1>
      <Route exact path="/home">
        <Home />
      </Route>
      <Route exact path="/contact">
        <Contact />
      </Route>
    </div>
  );
}

高级用法

集中式路由管理

Modern.js 支持集中式路由配置，这种方式更适合大型微前端应用：

defineConfig(App, {
  masterApp: {
    apps: [
      {
        name: 'Dashboard',
        activeWhen: '/dashboard',  // 路由匹配规则
        entry: 'http://127.0.0.1:8081/',
      },
      {
        name: 'TableList',
        activeWhen: '/table',
        entry: 'http://localhost:8082',
      },
    ],
  },
});

然后在主应用中使用 MApp 组件自动处理路由匹配：

function App() {
  const { MApp } = useModuleApps();

  return (
    <div>
      <MApp />
    </div>
  );
}

自定义加载状态

可以为子应用添加自定义的加载状态和错误处理：

function App() {
  const {
    Components: { Home },
  } = useModuleApps();

  return (
    <Route exact path="/home">
      <Home
        loadable={{
          loading: ({ pastDelay, error }) => {
            if (error) {
              return <div>加载出错: {error.message}</div>;
            } else if (pastDelay) {
              return <div>加载中...</div>;
            }
            return null;
          },
        }}
      />
    </Route>
  );
}

最佳实践

1. 命名规范：子应用名称区分大小写，确保配置中的名称与使用时的名称一致
2. 错误边界：建议为每个子应用组件添加错误边界处理
3. 性能优化：对于不常用的子应用，可以考虑动态加载
4. 样式隔离：确保子应用之间有良好的样式隔离机制

常见问题

1. 子应用未加载：检查 entry 地址是否正确，确保子应用服务已启动
2. 路由冲突：主应用和子应用的路由规则不要重叠
3. 上下文丢失：确保主应用和子应用之间的全局状态管理方案兼容

总结

useModuleApps 是 Modern.js 微前端架构中的核心 API，它简化了子应用的集成和管理工作。通过合理的配置和使用，开发者可以构建出既保持独立开发部署能力，又能良好集成的大型前端应用。