微前端（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）共享组件的时候，可以使用该方案。

来自：https://www.cnblogs.com/qiaojie/p/16356285.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_11696