qiankun的使用

qiankun

本文档主要对qiankun进行一个整体性的概述,让开发者有一个系统的主应用,微应用的概念,加快对框架的理解使用。

微前端概念示意图

qiankun的使用_第1张图片

qiankun简单介绍

下图是qiankun开发团队对微前端的提出的方案设计,最终产出物就是qiankun
qiankun的使用_第2张图片

  • 基于 single-spa 封装,提供了更加开箱即用的 API
  • 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • HTML Entry 接入方式。接入微应用像使用 iframe 一样简单
  • 样式隔离,确保微应用之间样式互相不干扰。
  • JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
  • 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
  • umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

使用场景

  • 项目很多,规模很大,都是每个项目独立使用git此类仓库维护的、技术栈为vue/react/angular的这类应用
  • 需要整合到统一平台上,你正在寻找可能比iframe更合适的替代方案
  • 项目A有功能A1、A2、A3,项目B有功能B1、B2、B3,产品经理要你把A2、B1、B3组合成一个包含这些功能的新项目

基本使用方式

  • 安装、注册、应用
  • 官网查看详细安装步骤

主应用与微应用

  • 直观来讲,上面示意图中的某平台代表的就是主应用,项目A,项目B...等代表各个子应用。
  • 主应用应该是包含了系统中的公共部分例如:菜单栏、登录、退出等功能;
  • 微应用则是为满足业务需求所开发的多数子项目,需要区分的是微应用和组件的区别,组件是为了满足单一模块的功能,组件组件之间可以根据业务进行通信等,而微应用则是一个完整独立的项目,所以如果关联紧密存在频繁通信的嘤应用应该做成一个微应用。

生命周期

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount三个生命周期钩子,以供主应用在适当的时机调用。

  • bootstrap:只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。通常可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等

    export async function bootstrap() {
      console.log('react app bootstraped');
    }
    
  • mount: 应用每次进入都会调用 mount 方法,通常在这里触发应用的渲染方法

    export async function mount(props) {
      console.log(props);
      ReactDOM.render(<App />, document.getElementById('react15Root'));
    }
    
  • unmount: 应用每次 切出/卸载 会调用的方法,通常在这里卸载微应用的应用实例

    export async function update(props) {
      console.log('update props', props);
    }
    

项目通信

  • qiankun提供: initGloabalState(state) 定义全局状态,并返回通信方法,官方建议在主应用使用,微应用通过 props 获取通信方法。

  • 简单示例:

    主应用:

    import { initGloabalState, MicroAppStateActions } from 'qiankun';
    
    // 初始化 state
    const actions: MicroAppStateActions = initGloabalState(state);
    
    actions.onGlobalStateChange((state, prev) => {
      // state: 变更后的状态; prev 变更前的状态
      console.log(state, prev);
    });
    actions.setGlobalState(state);
    actions.offGlobalStateChange();
    

    微应用:

    export async function mount(props) {
      const { container, onGlobalStateChange, setGlobalState } = props;
      onGlobalStateChange((state, prev) => {
        // state: 变更后的状态; prev 变更前的状态
        console.log(state, prev);
      }, true);
      setGlobalState({
        ignore: props.name,
        user: {
          name: props.name,
        },
      });
    }
    

Demo

这里建议本地跑一下官方的Demo,进一步了解

git clone https://github.com/umijs/qiankun.git

需要注意的点

  • 业务关联紧密的功能单元应该做成一个微应用,反之关联不紧密的可以考虑拆分成多个微应用。 一个判断业务关联是否紧密的标准:看这个微应用与其他微应用是否有频繁的通信需求。
  • Vue技术栈的话可能需要处理一些问题,例如:因为多个vue实例在同一个document里,需要避免全局变量污染、全局监听污染、样式污染等,需要制定接入规范等
  • 微应用不宜拆分过细,建议按照业务域来做拆分。
  • 微应用的 package.json 中的 name 字段是否是微应用中唯一的。
  • 由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的,所以必须要求这些静态资源支持跨域。

以前仅为前期调研过程,后续随着实际应用会持续更新

你可能感兴趣的:(qiankun的使用)