react 主应用

react 微应用

创建

pnpm create react-app qiankun-micro-app2 --template typescript

主应用安装 qiankun

pnpm install qiankun

主应用设置入口

• index.tsx

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:3011',
    container: '#micro-app1',
    activeRule: '/micro-app1',
  },
  {
    name: 'vue app',
    entry: '//localhost:3012',
    container: '#micro-app2',
    activeRule: '/micro-app2',
  },
]);

• App.tsx

function App() {
  return (
    <div className="App">
      <div id="micro-app1"></div>
      <div id="micro-app2"></div>
    </div>
  );
}

微应用安装

pnpm install react-app-rewired -D

修改微应用启动命令

 "start": "react-app-rewired start",

新建 config-overrides.js 用来修改 webpack 配置

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `reactApp`;
    config.output.libraryTarget = 'umd';
    // config.output.jsonpFunction = `webpackJsonp_${name}`;
    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;
  },
};

• index.tsx

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render(props: { container?: any; }) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props: { container?: any; }) {
  console.log('[react16] props from main framework', props);
  render(props);
}

export async function unmount(props: { container: any; }) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

数据传递

主应用

const state = {
  age: 18
}
const actions: MicroAppStateActions = initGlobalState(state);
setTimeout(() => {
  actions.setGlobalState({
    age: 20
  });
}, 2000)
actions.offGlobalStateChange()
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:3011',
    container: '#micro-app1',
    activeRule: '/micro-app1',
    props: {
      age: state.age
    }
  },
  {
    name: 'vue app',
    entry: '//localhost:3012',
    container: '#micro-app2',
    activeRule: '/micro-app2',
  },
]);

• 微应用

function render(props: any) {
  // @ts-ignore
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}