https://qiankun.umijs.org/zh
image.png

qiankun 生命周期钩子

  1. bootstrap：只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等
  2. mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
  3. unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例

配置主应用

https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8

src/router.js

  1. import React, {useEffect} from 'react'
  2. import {Router, Route, Switch} from 'dva/router'
  4. import {
  5.   registerMicroApps, // 注册子应用
  6.   start, // 启动
  7.   runAfterFirstMounted, // 第一个子应用装载完毕
  8.   // setDefaultMountApp, // 设置默认装载子应用
  9. } from 'qiankun'
  11. import IndexPage from './routes/IndexPage'
  12. import List from './routes/list.js'
  14. const style = {height: 50, backgroundColor: '#008c8c'}
  16. // 注册应用，子应用要支持跨域 fetch
  17. const APP_CONFIG = [
  18.   {
  19.     name: 'vueApp', // 应用的名字
  20.     // 默认会加载 html，解析里面的 js动态执行
  21.     entry: '//localhost:3030',
  22.     container: '#vue', // 加载不同的应用到容器里面
  23.     activeRule: '/vue', // 激活的路径, 注意：hash的路径的匹配 /#/vue
  24.     props: {user: 'lucy'} // 在注册子应用时，传递参数给子应用，只有一次
  25.   },
  26.   {
  27.     name: 'reactApp', // 应用的名字
  28.     entry: '//localhost:3031',
  29.     container: '#react', // 加载不同的应用到容器里面
  30.     activeRule: '/react', // 激活的路径
  31.     props: {lib: 'antd'}
  32.   }
  33. ]
  35. const APP_LIFE = {
  36.   beforeLoad: [ // 挂载前回调
  37.     app => {
  38.       console.log("before load", app)
  39.     }
  40.   ],
  41.   beforeMount: [ // 挂载后回调
  42.     app => {
  43.       console.log("before mount", app)
  44.     }
  45.   ],
  46.     afterUnmount: [ // 卸载后回调
  47.     app => {
  48.       console.log("after unload", app)
  49.     }
  50.   ]
  51. }
  53. function RouterConfig({history}) {
  55.   useEffect(init, [])
  57.   function init() {
  58.     // 注册应用
  59.     registerMicroApps(APP_CONFIG, APP_LIFE)
  61.     // 设置默认子应用,参数与注册子应用时genActiveRule("/vue")内的参数一致
  62.     // setDefaultMountApp("/vue");
  64.     // 启动应用, all主应用start后,即开始预加载所有微应用静态资源
  65.     start({
  66.       prefetch: false, // 'all' 取消预加载，不点击路由，不加载
  67.     })
  69.     // 第一个子应用加载完毕回调
  70.     runAfterFirstMounted(()=>{
  71.        console.log('[MainApp] first app mounted');
  72.     });
  73.   }
  75.   return (
  76.     <>
  77.       <header style={style}>
  78.         <h1>全局的标题</h1>
  79.       </header>
  81.       <Router history={history}>
  82.         <Switch>
  83.           <Route path="/" exact component={IndexPage}/>
  84.           <Route path="/list" exact component={List}/>
  85.         </Switch>
  86.       </Router>
  88.       <div id="vue" />
  89.       <div id="react" />
  90.     </>
  91.   )
  92. }
  94. export default RouterConfig

src/index.js

  1. import dva from 'dva';
  3. import {createBrowserHistory } from 'history'
  4. import './index.css';
  6. // 1. Initialize
  7. const app = dva({
  8.   history: createBrowserHistory()
  9. });
  11. // 2. Plugins
  12. // app.use({});
  14. // 3. Model
  15. // app.model(require('./models/example').default);
  17. // 4. Router
  18. app.router(require('./router').default);
  21. // 5. Start
  22. app.start('#global-root');

public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Dva Demo</title>
  7.   <link rel="stylesheet" href="index.css" />
  8. </head>
  9. <body>
  11.   <div id="global-root"></div>
  12.   <script src="index.js"></script>
  13. </body>
  14. </html>

dva package.json

  1. {
  2.   "private": true,
  3.   "scripts": {
  4.     "start": "roadhog server",
  5.     "start:no-socket": "roadhog server",
  6.     "build": "roadhog build",
  7.     "lint": "eslint --ext .js src test",
  8.     "precommit": "npm run lint"
  9.   },
  10.   "dependencies": {
  11.     "@ant-design/aliyun-theme": "0.0.4",
  12.     "@ant-design/icons": "^4.6.4",
  13.     "antd": "^4.16.3",
  14.     "bizcharts": "^4.1.5",
  15.     "dva": "^2.4.1",
  16.     "qiankun": "^2.5.0",
  17.     "react": "^17.0.2",
  18.     "react-dom": "^17.0.2"
  19.   },
  20.   "devDependencies": {
  21.     "@babel/plugin-proposal-decorators": "^7.15.4",
  22.     "babel-plugin-dva-hmr": "^0.4.2",
  23.     "babel-plugin-import": "^2.24.2",
  24.     "eslint": "^7.32.0",
  25.     "eslint-config-umi": "^1.6.0",
  26.     "eslint-plugin-flowtype": "^6.1.0",
  27.     "eslint-plugin-import": "^2.6.0",
  28.     "eslint-plugin-jsx-a11y": "^6.4.1",
  29.     "eslint-plugin-react": "^7.26.0",
  30.     "husky": "^7.0.2",
  31.     "redbox-react": "^1.6.0",
  32.     "roadhog": "^2.5.0-beta.4"
  33.   }
  34. }