3

微前端（qiankun）主应用共享React组件

 2 years ago
source link: https://www.fly63.com/article/detial/11696
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

更新日期: 2022-06-09阅读量: 9标签: 微前端分享

扫一扫分享

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

我们知道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组件会有问题，报错如下

62a2e0950a290.jpg

经排查分析，应该是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://www.fly63.com/article/detial/11696


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK