1. 初始化基座应用
基座应用：基座应用是微前端架构中的主应用，负责管理和协调各个子应用的加载和卸载。
初始化：基座应用在启动时会初始化路由配置，注册各个子应用的路由。
2. 注册子应用
子应用需要向基座应用注册自己的路由和入口点。这通常通过一个配置文件或注册函数来实现。
// 基座应用中的注册函数
registerMicroApp('app1', {entry: '//localhost:3001',container: '#subapp-container',activeRule: '/app1'
});registerMicroApp('app2', {entry: '//localhost:3002',container: '#subapp-container',activeRule: '/app2'
});
3. 路由匹配
当用户访问某个 URL 时，基座应用会根据路由配置匹配相应的子应用。
// 基座应用中的路由匹配
const router = new Router();
router.addRoute('/app1', () => loadApp('app1'));
router.addRoute('/app2', () => loadApp('app2'));
router.start();
4. 加载子应用
基座应用根据匹配的路由动态加载对应的子应用。
function loadApp(name) {return import(`@/apps/${name}`).then((app) => {app.bootstrap(); // 子应用的启动方法});
}
5. 渲染子应用
子应用加载完成后，基座应用会将子应用渲染到指定的容器中。
// 子应用的启动方法
export function bootstrap() {render(<App />, document.getElementById('subapp-container'));
}
6. 路由切换
当用户导航到不同的路由时，基座应用会卸载当前子应用，并加载新的子应用。
function switchRoute(path) {const currentApp = getCurrentApp();if (currentApp) {currentApp.unmount(); // 卸载当前子应用}const nextApp = getAppByPath(path);if (nextApp) {loadApp(nextApp.name); // 加载新的子应用}
}
7. 生命周期管理
子应用通常会提供一些生命周期方法，如 bootstrap、mount、unmount 等，用于管理子应用的加载、渲染和卸载过程。
// 子应用的生命周期方法
export function bootstrap() {console.log('app1 bootstrap');
}export function mount(props) {render(<App />, props.container);
}export function unmount() {unmountComponentAtNode(document.getElementById('subapp-container'));
}
8. 状态管理
在微前端架构中，子应用之间可能需要共享状态。基座应用可以提供一个全局的状态管理机制，如 Redux、MobX 等。
// 基座应用中的状态管理
const store = createStore(reducer);// 子应用中获取全局状态
function getGlobalState() {return store.getState();
}
9. 通信机制
子应用之间或子应用与基座应用之间可能需要进行通信。可以通过事件总线、全局对象等方式实现。
// 基座应用中的事件总线
const eventBus = new EventEmitter();// 子应用中发送事件
eventBus.emit('event-name', data);// 子应用中监听事件
eventBus.on('event-name', (data) => {console.log(data);
});
