微前端(qiankun)主应用共享React组件
前言
最近需要重构一个老项目,定的方案用微前端去改造。主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件。过程中遇到一些问题,记录一下。
方案
我们知道qiankun,可以通过props
通信传递数据,把组件通过props
传递过去不就行了。来开始改造我们的代码
主应用
导入组件,通过props共享出去
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun';
// 导入一些组件
import Custom_Date from "@date/config";
import CompanyTitle from '@title/config';
import CustomSelect from '@select/config';
import UpdateTime from '@updateTime/config';
const shareComponent = {
Custom_Date,
CompanyTitle,
CustomSelect,
UpdateTime
}
registerMicroApps([
{
name: 'child-app', // 一级市场
entry: '//localhost:7011',
container: '#childApp',
activeRule: '/page/appPM',
props: {
base: '/page/app-child/',
...shareComponent
},
},
]);
子应用
在qiankun的生命周期函数接收props,并缓存。
缓存组件工具函数
let shareMainComponent: Record<string, any> = {}
// 获取共享的组件
export const getShareMainComponent = () => {
return shareMainComponent;
}
// 设置共享的组件
export const setShareMainComponent = (currShareMainComponent: Record<string, any>) => {
for (const key in currShareMainApp) {
if (Object.prototype.hasOwnProperty.call(currShareMainComponent, key)) {
shareMainComponent[key] = currShareMainComponent[key];
}
}
}
子应用生命周期中设置共享组件
import { setShareMainComponent } from './utils/shareMainComponent';
export const qiankun = {
async bootstrap(props: any) {
console.log('app1 bootstrap', props);
},
// 应用 render 之前触发
async mount(props: any) {
setShareMainComponent(props.shareMainApp);
},
async unmount(props: any) {
console.log('app1 unmount', props);
},
};
子应用使用
import React, { FC, useEffect, useState } from 'react';
import { getShareMainComponent } from '../../../utils/shareMain';
export interface IndexConfigPageProps {
}
const IndexConfigPage: FC<IndexConfigPageProps> = props => {
const {
Custom_Date,
CompanyTitle,
CustomSelect,
UpdateTime
} = getShareMainComponent();
useEffect(() => {
}, []);
return (
<div>
<Custom_Date />
<CustomTitle />
</div>
);
}
export default IndexConfigPage;
hooks组件问题
类组件正常是没问题的,但hooks组件会有问题,报错如下
经排查分析,应该是React不是一个实例,hooks组件需要同一个实例。
解决方案
借助webpack的externals
去用同一份React。
主应用
主应用入口index.html引入react和react-dom的js文件
<script src="<%= htmlWebpackPlugin.files.publicPath %>public/react/react.development.js"></script>
<script src="<%= htmlWebpackPlugin.files.publicPath %>public/react-dom/react-dom.development.js"></script>
配置webpack的externals
,如下
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
主应用设置完成,下面开始配置子应用。
子应用
子应用这时就不需要引入相关的js文件,直接配置externals
,用主应用的React和ReactDom。配置如下
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
在此访问,问题得已解决
结束语
我们在重构巨石老项目的时候,可以考虑微前端,用微前端(qiankun)共享组件的时候,可以使用该方案。
如果你觉得该文章不错,不妨
1、点赞,让更多的人也能看到这篇内容
2、关注我,让我们成为长期关系
3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章
微前端(qiankun)主应用共享React组件的更多相关文章
- 基于微前端qiankun的多页签缓存方案实践
作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...
- vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)
️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...
- 微前端框架single-spa初探
前言 最近入职的一家公司采用single-spa这个微前端框架,所以自学了此框架. single-spa这个微前端框架虽然有中文文档,但是有些零散和晦涩. 所以我想在学习之余,写篇博客拉平一下这个学习 ...
- 初步认识微前端(single-spa 和 qiankun)
初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...
- 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证
10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...
- 【微前端】微前端最终章-qiankun指南以及微前端整体探索
序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原 ...
- 微前端框架 之 qiankun 从入门到源码分析
封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qianku ...
- 微前端框架 qiankun 技术分析
我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能,但是又实现的不够彻底,遗留了很多问题需要解决.虽然官方提供了很多样例和最佳实践,但是总显得过于单薄,总给人一种&quo ...
- 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...
随机推荐
- EMS批量为用户分配邮箱
组织单位"Office"下有10个域用户,可以通过PowerShell命令一次为该组织单位中的没有分配邮箱的域用户分配邮箱. 以Exchange管理员身份打开EMS控制台.在Pow ...
- SpringBoot2.x修改Redis序列化方式
添加一个配置类即可: /** * @Author FengZeng * @Date 2022-03-22 13:43 * @Description TODO */ @Configuration pub ...
- power app 解决方案中表导入问题
我们在powerapp中导出的表,解压后是会是乱码,导致在导入的时候会失败,或者导入数据不全. 使用 2 但是直接导入也会是乱码,所以需要将文件重新保存一下: 首先新建一个excel 选择要导入的那个 ...
- 使用IDEA生产JavaDoc文档
源代码 package com.*****.base; //文档注解 /** * @Author intelliyu * @version 1.0 //版本 * since 1.8 //指明需要最早使 ...
- 硬核 | Redis 布隆(Bloom Filter)过滤器原理与实战
在Redis 缓存击穿(失效).缓存穿透.缓存雪崩怎么解决?中我们说到可以使用布隆过滤器避免「缓存穿透」. 码哥,布隆过滤器还能在哪些场景使用呀? 比如我们使用「码哥跳动」开发的「明日头条」APP 看 ...
- JavaScript基础第04天笔记
JavaScript基础第04天笔记 1 - 数组 1.1 数组的概念 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式. 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以 ...
- SQL语言学习-DQL
DQL:查询表中的记录 * select * from 表名; 1. 语法: select 字段列表 from 表名列表 where 条件列表 group by 分组字段 having 分组之后的条件 ...
- PHP入门-Window 下利用Nginx+PHP 搭建环境
前言 最近公司有个PHP项目需要开发维护,之前一直都是跟着巨硬混的,现在要接触PHP项目.学习一门新语言之前,先搭建好环境吧,鉴于公司项目是基于php 7.1.33 版本的,所以以下我使用的都是基于这 ...
- python跑机器学习时报错:Process finished with exit code -1073740791 (0xC0000409)
emmm...第二次遇到这个错误了,好好的好好的卷积神经网络突然就跑不起了.就弹出一堆信息也不报那行代码错了... 记录一下: 两次解决方法相同,删h5py包 Process finished wit ...
- STS快捷键
在类或者方法上方加注释:shift+alt+J