react-micro-app v0.1.1

micro-app

基于 iframe 实现的简易微前端应用。

快速开始

安装依赖

分别在父应用和子应用中安装依赖包。

yarn add react-micro-app

配置父应用

1. 初始化父应用

在加载子应用之前配置父应用。

import microApp from 'react-micro-app'

microApp.setupMaster({
  /* 配置信息 */
})

2. 嵌入子应用

分配一个路由给子应用。你可以在父应用的路由组件中使用 <MicroApp /> 组件嵌入子应用。

import { MicroApp } from 'react-micro-app'

export default function MyPage() {
  return <MicroApp name="app-name" />
}

完成以上步骤后，你应该可以在页面中看到你的子应用正常渲染出来。

进阶使用

配置父应用

在引入子应用时，应该首先配置父应用，注册子应用的相关配置信息，这样父应用才能识别子应用并在内部正确引入。

import microApp from 'react-micro-app'

const masterInstance = microApp.setupMaster({
  // 注册子应用的相关配置信息。
  apps: [{ name: 'app-name', entry: 'http://micro.app' }],
})

引入子应用

在路由组件中使用 <MicroApp /> 组件引入子应用。

有两种方式可以找到加载子应用的入口地址。

第一种：使用 name，它是子应用的唯一名称，在配置父应用时指定。

import { MicroApp } from 'react-micro-app'

export default function () {
  return <MicroApp name="app-name" />
}

第二种：使用 entry，直接传递子应用的地址。这种方式的优先级更高。

import { MicroApp } from 'react-micro-app'

export default function () {
  return <MicroApp entry="http://micro.app" />
}

配置子应用

虽然不对子应用作任何配置也能在父应用中正常渲染子应用，但是如果你想获取更高级的功能（如和父应用进行通信），那么就需要在子应用加入配置。

import microApp, { isEmbedded } from 'react-micro-app'

export async function render(oldRender: () => React.ReactElement) {
  if (isEmbedded()) {
    // 判断子应用是否嵌入到其他应用中，以此按需初始化子应用
    microApp.setupSlave({})
    oldRender()
  } else {
    oldRender()
  }
}

完成初始化后，还是在 src/app.tsx，使用 <MasterProvider /> 为子应用提供上下文信息。

import { MasterProvider } from 'react-micro-app'

export function rootContainer(container: React.ReactElement) {
  return <MasterProvider>{container}</MasterProvider>
}

之后，在你的页面组件或布局组件中使用 SlaveApp 组件。

import { SlaveApp, useMasterContext, isEmbedded } from 'react-micro-app'

export default function Layout(props: { children: React.ReactNode }) {
  // 获取父应用传递的上下文数据
  const masterData = useMasterContext()

  if (isEmbedded()) {
    // 判断子应用是否已经嵌入到父应用，保证在以子应用的身份运行时才渲染 <SlaveApp />
    return <SlaveApp>{props.children}</SlaveApp>
  }

  return props.children
}

子应用生命周期

• beforeMount，子应用开始挂载前调用。此时状态变为 mounting。
• afterMount， 子应用挂载完成时调用。此时状态变为 mounted。
• afterUnmount，卸载完成时调用。此时状态变为 notMounted 状态。

子应用配置生命周期钩子

microApp.setupSlave({
  beforeMount() {},
  afterMount(state) {
    console.log(state)
  },
  afterUnmount() {},
})

父应用和子应用通信

主应用透传数据

import { useState } from 'react'
import { MicroApp } from 'react-micro-app'

microApp.setupMaster({
  globalState: {
    /**
     * 在这里设置传递给所有子应用的状态数据，所有子应用都能消费，
     * 会和 MicroApp 组件传递的 globalState 进行浅合并。
     */
  },
})

export default function () {
  const [myState] = useState({})

  return <MicroApp name="app-name" globalState={myState} />
}

子应用消费数据

import { MasterProvider, useMasterContext } from 'react-micro-app'

function App(props: { children: React.ReactNode }) {
  const masterData = useMasterContext()
  return props.children
}

export default function (props: { children: React.ReactNode }) {
  return (
    <MasterProvider>
      <App>{props.children}</App>
    </MasterProvider>
  )
}

API

MasterOptions

SlaveOptions

App

MasterState

MicroAppProps

父应用实例：masterInstance