react加载微应用（qiankun）

微应用（react）

1、主应用与子应用加载qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、主应用

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'reactApp1', // 子路由名称
    entry: '//localhost:3000',
    container: '#container', // 加载的DOM的id
    activeRule: '/app-react', // 加载路由
  },
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
  {
    name: 'angularApp',
    entry: '//localhost:4200',
    container: '#container',
    activeRule: '/app-angular',
  },
]);
// 启动 qiankun
start();

3、子应用
3.1在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

3.2、加载react-app-rewired

yarn add react-app-rewired -D # 或者 npm i react-app-rewired -D 

3.3、项目内新增config-overrides.js

module.exports = {
    webpack: (config) => {
        config.output.library = `reactApp1`;
        config.output.libraryTarget = "umd";
        // config.jsonpFunction = `webpackJsonp_reactApp1`;
        config.output.globalObject = "window";
        return config
    },
    devServer: (_) => {
        const config = _;
        config.headers = {
            "Access-Control-Allow-Origin": "*",
        };
        config.historyApiFallback = true;
        config.hot = false;
        config.watchContentBase = false;
        config.liveReload = false;

        return config;
    }
}

3.4、将子应用src里面更改为index.js更改为

import './public-path'
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


// const root = ReactDOM.createRoot(document.getElementById('root'));
//   root.render(
//     <React.StrictMode>
//       <App />
//     </React.StrictMode>
//   );




/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
 export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev, '变更后的状态');
    props.setGlobalState({ ...state, age: 18, });
  });
  console.log('react app mount', props.container);
  const root = ReactDOM.createRoot(props.container ? props.container.querySelector('#root') : document.getElementById('root'));
  root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
    console.log('react app mount11', root);
  // const root = ReactDOM.createRoot(document.getElementById('root'))
  

  
}

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致


/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

if (!window.__POWERED_BY_QIANKUN__) {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}


reportWebVitals();