@ks-dilu/react-micro

微前端 react 子应用 SDK，简化微前端子应用的接入的成本，同时优化了 qiankun update 子应用的逻辑

Install

npm install -S @es/dilu-react-micro

Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑，使用 @ks-dilu/react-micro 大大简化了子应用的接入逻辑

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { registerDLMicro, isDLRunEnvironment, DLMicroContext } from '@es/dilu-react-micro';

registerDLMicro({
  App: () => {
    return (
      <DLMicroContext.Consumer>
        {(value: any) => {
          console.log('gml', value);
          return <App user={value.user} sso={value.sso}></App>;
        }}
      </DLMicroContext.Consumer>
    );
  },
  rootNodeId: 'root',
});

!isDLRunEnvironment() &&
  ReactDOM.render(
    <React.StrictMode>
      <App user={{}} sso={{}} />
    </React.StrictMode>,
    document.getElementById('root'),
  );

export * from '@ks-dilu/react-micro';

API

registerDLMicro

• 参数：（options, isRenderByNonDLEnvironment）=> {mount, update, unmount, bootstrap}
• 描述：封装了 qiankun 子应用的逻辑，该方法收敛注册子应用的逻辑
• isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用，默认 false
• options 参数说明

| 参数 | 类型 | 描述 | 必填 | 默认值 | | --- | --- | --- | --- | --- | | App | ReactElement、FunctionComponent 、React.FC | 子应用的入口 | 必填 | | | rootNodeId | string | 子应用的根节点 Id | 必填 | | | vueAppCb | function | 实例化 vue 时的回调，用于挂载 vue 的插件等，vue2 和 vue3 有细微差别，可以查看相关 demo 的使用 | 选填 | |

DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容，取决于主应用中的 extra;

useDLMicroValue

获取主应用透传子应用 Props 的 hooks，

isDLRunEnvironment

是否是在微前端的环境