micro-app 微前端如何接入umi3react

接入 umi3 和接入其他 React 应用一样，只需要在主应用中安装 `@umijs/plugin-qiankun` 插件，并在子应用中使用 `qiankun` 的 `registerMicroApps` 方法注册子应用。

具体步骤如下：

1. 在主应用中安装 `@umijs/plugin-qiankun` 插件：

yarn add @umijs/plugin-qiankun -D

2. 在主应用中的 `.umirc.ts` 或 `config/config.ts` 文件中配置 `qiankun` 插件：

export default {
  // ...
  plugins: ['@umijs/plugin-qiankun'],
  qiankun: {
    master: {
      // 主应用配置
    },
  },
};

3. 在主应用中使用 `qiankun` 的 `registerMicroApps` 方法注册子应用：

import { registerMicroApps, start } from 'qiankun';
import React from 'react';
import ReactDOM from 'react-dom';

function render({ appContent, loading }) {
  const container = document.getElementById('app-container');
  ReactDOM.render(
    <div>
      {loading && <p>Loading...</p>}
      <div dangerouslySetInnerHTML={{ __html: appContent }} />
    </div>,
    container,
  );
}

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8000',
    container: '#sub-app-container',
    activeRule: '/sub-app',
  },
]);

start();

4. 在子应用中使用 `react-app-rewired` 对 `create-react-app` 脚手架进行配置。

由于 `create-react-app` 脚手架默认隐藏了 webpack 配置，我们需要使用 `react-app-rewired` 来暴露 webpack 配置。具体做法可以参考官方文档：https://umijs.org/plugins/qiankun#%E5%AD%90%E5%BA%94%E7%94%A8

5. 在子应用中导出一个 render 方法，用于子应用启动时挂载到主应用中：

import React from 'react';
import ReactDOM from 'react-dom';

function render(props: any) {
  const { container } = props;
  ReactDOM.render(<App />, container);
}

export default render;

6. 在子应用中使用 `qiankun` 的 `start` 方法启动子应用：

import { start } from 'qiankun';
import render from './render';

// 导出生命周期钩子函数
export const bootstrap = async () => {};
export const mount = async (props: any) => {
  render(props);
};
export const unmount = async () => {};

// 启动子应用
start();

以上就是在 micro-app 微前端中接入 umi3 react 的基本步骤，需要注意的是，在子应用中同样需要安装 `qiankun` 包和 `react` 包，并且在开发时需要同时启动主应用和子应用，才能看到微前端的效果。