序
这才2月中旬，广州就已经渐渐地进入了夏季，——夏天总是让人焦虑的。过年闲暇时间写下了微前端这系列的终章，欢迎拍砖。如果你习惯直接上手代码，不妨跳到实践一节，直接上代码教程玩一玩。
qiankun原理和API介绍qiankun是基于singlespa框架的一个上层应用，它提供了完整的生命周期，和一些钩子函数，通过路由匹配来动态加载注册微应用，同时提供了一系列api对微应用做管理和预加载等，它相对singlespa来说进步是比较大的。
所以---qiankun实质上是singlespa的一个封装，基于我们在上一节看到的，singlespa是通过输出一个manifest.json 通过标识入口信息动态构造script渲染实现的微前端应用，类似下面的图：
回顾一下singlespa在渲染过程中的核心逻辑
1、 首先我们有 main（主app） child（子app），主app只有一个，子app可以有多个
2、 其次，主app上一般我们可以在index.html里面，写多几个空间，也就是多几个div
例如：
<div id=”react-app”></div> <div id=”vue-app”></div>
3、然后，在我们的child上，我们要用webpack插件，生成一个带有所有需要加载的依赖文件的manifest.json
4、主应用去加载这个manifest.json，获取到具体的js，使用script标签把它放到主应用上，进行渲染
在qiankun中对这套逻辑做了基本的封装, 让我们只需要经过简单的几个api就可以控制singlespa中比较复杂的配置和概念。
注册
import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // 应用名称 entry: '//localhost:7100', // 应用入口，应用需要增加cors选项 container: '#yourContainer', // 应用单独的appid的div activeRule: '/yourActiveRule', // 匹配路由 }, { name: 'vue app', entry: { scripts: ['//localhost:7100/main.js'] }, container: '#yourContainer2', activeRule: '/yourActiveRule2', }, ]); start();
main
main是一个qiankun的主体部分，它也是不限制框架种类的，可以用react也可以用vue和angular，只需要在entry.js里面注册它就可以了。
一般情况下main的作用是存放公共代码，例如：
1、消息触发器
2、公共路由
3、权限触发器
4、存放例如全局管理、皮肤、用户管理等公共页面
你也可以把站点的首页写在这里，可以加快主体加载速度
生命周期
bootstrap
boostrap相当于init，子应用在第一次加载的时候会调用这个方法， 一般可以在里面做一些项目的初始化操作，例如
mount
每次在加载到子应用的时候都会调用它，就像是componentDidMount,一般情况下我们要把ReactDOM.render这样的初始化函数写在里面，每次mount时调用render
unmount
这个跟mount正好相反，每一次注销/切换子应用的时候会调用它，一般我们在这里 ReactDOM.unmountComponentAtNode 注销这个应用，然后把整个项目的容器让出来
update
这是个可选的生命周期，子应用发生变化的时候会调用。
路由匹配
路由规则有两种，需要手动调用对应的子应用渲染就行了，通过一个叫loadMicroApp的方法挂载一个子应用组件，这样就可以在main中像配置一个正常的应用那样配置子应用的view了。
import { loadMicroApp } from 'qiankun'; import React from 'react'; class App extends React.Component { containerRef = React.createRef(); microApp = null; componentDidMount() { this.microApp = loadMicroApp( { name: 'app1', entry: '//localhost:1234', container: this.containerRef.current, props: { name: 'qiankun' } }, ); } componentWillUnmount() { this.microApp.unmount(); } componentDidUpdate() { this.microApp.update({ name: 'kuitos' }); } render() { return <div ref={this.containerRef}></div>; } }
处理样式
沙箱
qiankun的沙箱模式是在start的api配置项里面开启的