前言

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

方案

我们知道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. ubuntu下Docker配置阿里云镜像加速

    1.确认正确安装好docker,登录阿里云,打开如下界面 https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 2.复制下面那段代码, ...

  2. BI系统打包Docker镜像及容器化部署的具体实现

    在过去的几年中,"云"作为明星热词站在了各种新潮技术之中,你可能使用过,但说不清它的原理:或者是没用过,但听过它的大名:也可能连它的名字都没听过,但你对这只蓝色鲸鱼一定十分眼熟.作 ...

  3. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  4. MySQL启动过程详解三:Innodb存储引擎的启动

    Innodb启动过程如下: 1. 初始化innobase_hton,它是一个handlerton类型的指针,以便在server层能够调用存储引擎的接口. 2. Innodb相关参数的检车和初始化,包括 ...

  5. ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)

    摘要:介绍在ubuntu16.04中从下载到安装成功的完整步骤.本文给出MATLAB R2017b(Linux系统)的完整安装包百度云盘下载地址,逐步介绍一种简单易行的安装方法,在桌面创建快捷方式,最 ...

  6. 08. 树莓派安装MySQL

    1. 配置国内源(如果之前设置过可跳过步骤1~步骤2) vim /etc/apt/sources.list.d/raspi.list 2. 添加源 ,文档内原先的内容在开头加#号注释掉,加上下面这个 ...

  7. Linux命令篇 - sed 命令

    sed sed - stream editor for filtering and transforming text: sed:利用脚本来处理.编辑文本文件: 格式:sed [OPTION]... ...

  8. Java-GUI编程之Swing组件

    目录 为组件设置边框 使用JToolBar创建工具条 JColorChooser和JFileChooser JColorChooser JFileChooser JOptionPane 基本概述 四种 ...

  9. springboot简单发送邮件介绍

    1.新建一个springboot项目 2.所需要的的jar包: <dependency> <groupId>org.springframework.boot</group ...

  10. 使用requests爬取梨视频、bilibili视频、汽车之家,bs4遍历文档树、搜索文档树,css选择器

    今日内容概要 使用requests爬取梨视频 requests+bs4爬取汽车之家 bs4遍历文档树 bs4搜索文档树 css选择器 内容详细 1.使用requests爬取梨视频 # 模拟发送http ...