umi3 qiankun 通讯
时间: 2025-02-25 14:54:51 浏览: 34
### Umi3 和 Qiankun 微前端通信方式及实现
#### 一、Umi3 和 Qiankun 集成概述
Qiankun 是一个基于单页应用 (SPA) 的微前端框架,能够帮助开发者轻松构建多 SPA 应用程序。而 UmiJS 则是一个可插拔的企业级 react 应用框架。两者结合可以创建复杂且模块化的应用程序结构。
对于业务划分清晰、应用间通信较少的微前端应用场景来说,这种集成方案非常适合[^1]。通过这种方式开发出来的项目不仅易于维护而且扩展性强。
#### 二、父子应用间的路由处理
当主应用采用的是 Qiankun 架构时,在配置子应用路径时需要注意特殊前缀设置。具体而言就是为所有子应用下的页面 URL 添加统一前缀 `/qiankun/react-app` ,从而确保这些链接能够在正确上下文中被解析并加载相应的资源[^2]。
```javascript
// 主应用注册子应用示例代码
registerMicroApps([
{
name: 'reactApp', // 子应用名称
entry: '//localhost:7100',
container: '#container', // 容器节点的选择器或 HTMLElement 对象
activeRule: '/qiankun/react-app' // 激活该子应用的路径规则
}
]);
```
#### 三、父应用向子应用传递数据
为了使不同部分之间更好地协作交流,可以通过 `props` 或者全局状态管理工具来共享信息。其中一种简单的方法是在启动子应用之前直接传入所需参数:
```javascript
import { initGlobalState, MicroAppStateActions } from "qiankun";
const actionsMap = initGlobalState({
user: {},
});
actionsMap.setGlobalState({ key: value });
export default function(props){
const state = useMountEffect(() => props?.onGlobalStateChange);
useEffect(() => {
console.log(state); // 获取到的数据
}, [state]);
return (
<div>
{/* 组件内容 */}
</div>
);
}
```
这里展示了如何利用 `initGlobalState()` 函数初始化全局状态,并将其作为属性传递给子组件实例化过程中。之后便可以在任何地方监听此状态的变化事件来进行相应操作。
#### 四、解决依赖冲突问题
由于各个独立部署的服务可能会引入相同第三方库的不同版本号造成冲突现象发生;因此建议在实际工程实践中采取措施避免此类情况的发生。比如提前规划好公共依赖项清单以及制定合理的打包策略等手段都可以有效缓解上述难题带来的困扰。
阅读全文
相关推荐

















