前言

最近需要重构一个老项目,定的方案用微前端去改造。主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件。过程中遇到一些问题,记录一下。

方案

我们知道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组件的更多相关文章

  1. 基于微前端qiankun的多页签缓存方案实践

    作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...

  2. vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)

    ️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...

  3. 微前端框架single-spa初探

    前言 最近入职的一家公司采用single-spa这个微前端框架,所以自学了此框架. single-spa这个微前端框架虽然有中文文档,但是有些零散和晦涩. 所以我想在学习之余,写篇博客拉平一下这个学习 ...

  4. 初步认识微前端(single-spa 和 qiankun)

    初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...

  5. 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

    10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...

  6. 【微前端】微前端最终章-qiankun指南以及微前端整体探索

    序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原 ...

  7. 微前端框架 之 qiankun 从入门到源码分析

    封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qianku ...

  8. 微前端框架 qiankun 技术分析

    我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能,但是又实现的不够彻底,遗留了很多问题需要解决.虽然官方提供了很多样例和最佳实践,但是总显得过于单薄,总给人一种&quo ...

  9. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

随机推荐

  1. EMS批量为用户分配邮箱

    组织单位"Office"下有10个域用户,可以通过PowerShell命令一次为该组织单位中的没有分配邮箱的域用户分配邮箱. 以Exchange管理员身份打开EMS控制台.在Pow ...

  2. SpringBoot2.x修改Redis序列化方式

    添加一个配置类即可: /** * @Author FengZeng * @Date 2022-03-22 13:43 * @Description TODO */ @Configuration pub ...

  3. power app 解决方案中表导入问题

    我们在powerapp中导出的表,解压后是会是乱码,导致在导入的时候会失败,或者导入数据不全. 使用 2 但是直接导入也会是乱码,所以需要将文件重新保存一下: 首先新建一个excel 选择要导入的那个 ...

  4. 使用IDEA生产JavaDoc文档

    源代码 package com.*****.base; //文档注解 /** * @Author intelliyu * @version 1.0 //版本 * since 1.8 //指明需要最早使 ...

  5. 硬核 | Redis 布隆(Bloom Filter)过滤器原理与实战

    在Redis 缓存击穿(失效).缓存穿透.缓存雪崩怎么解决?中我们说到可以使用布隆过滤器避免「缓存穿透」. 码哥,布隆过滤器还能在哪些场景使用呀? 比如我们使用「码哥跳动」开发的「明日头条」APP 看 ...

  6. JavaScript基础第04天笔记

    JavaScript基础第04天笔记 1 - 数组 1.1 数组的概念 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式. 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以 ...

  7. SQL语言学习-DQL

    DQL:查询表中的记录 * select * from 表名; 1. 语法: select 字段列表 from 表名列表 where 条件列表 group by 分组字段 having 分组之后的条件 ...

  8. PHP入门-Window 下利用Nginx+PHP 搭建环境

    前言 最近公司有个PHP项目需要开发维护,之前一直都是跟着巨硬混的,现在要接触PHP项目.学习一门新语言之前,先搭建好环境吧,鉴于公司项目是基于php 7.1.33 版本的,所以以下我使用的都是基于这 ...

  9. python跑机器学习时报错:Process finished with exit code -1073740791 (0xC0000409)

    emmm...第二次遇到这个错误了,好好的好好的卷积神经网络突然就跑不起了.就弹出一堆信息也不报那行代码错了... 记录一下: 两次解决方法相同,删h5py包 Process finished wit ...

  10. STS快捷键

    在类或者方法上方加注释:shift+alt+J