微前端应用间的通信方式深入解析

2023-09-30 18:59:04

qiankun微前端架构中的应用间通信

子应用通信

微前端架构中的子应用通信是指父应用与子应用之间的数据共享和功能协作。qiankun提供了两种实现子应用通信的主要方式：

事件总线通信

事件总线通信通过一个全局事件总线实现应用间的通信。父应用和子应用都可以向事件总线发送和监听事件，从而共享数据和调用功能。

例如，父应用可以发送一个“addItem”事件，子应用可以监听此事件并处理添加商品到购物车的操作：

// 父应用
import { useEvent } from 'qiankun'

const eventBus = useEvent()

const addItem = (item) => {
  eventBus.emit('addItem', item)
}

// 子应用
import { useEvent } from 'qiankun'

const eventBus = useEvent()

eventBus.on('addItem', (item) => {
  // 处理商品信息
})

Props通信

Props通信通过子应用的props属性传递数据。父应用可以通过设置子应用的props属性来传递数据，子应用可以通过访问props属性来获取数据。这种方式通常用于传递配置信息或初始数据：

// 父应用
import MySubApp from './MySubApp'

const App = () => {
  return <MySubApp initialData={someData} />
}

// 子应用
import { useEffect, useRef } from 'react'

const MySubApp = ({ initialData }) => {
  const dataRef = useRef(initialData)

  useEffect(() => {
    // 使用initialData进行初始化
  }, [])

  return (
    <div>
      {/* ... */}
    </div>
  )
}

微前端通信

微前端通信是指多个子应用之间的通信。qiankun提供了两种实现微前端通信的主要方式：

全局状态管理

全局状态管理通过一个全局状态管理工具（如Redux、Vuex）管理共享状态。多个子应用都可以访问和修改全局状态，从而实现数据共享和通信：

// 创建一个全局状态管理存储
const store = createStore({
  cart: []
})

// 在父应用中提供store
import { Provider } from 'react-redux'

const App = () => {
  return (
    <Provider store={store}>
      {/* ... */}
    </Provider>
  )
}

// 在子应用中使用store
import { useSelector } from 'react-redux'

const MySubApp = () => {
  const cart = useSelector(state => state.cart)

  return (
    <div>
      {/* ... */}
    </div>
  )
}

消息队列通信

消息队列通信通过一个消息队列传递消息。多个子应用都可以订阅消息队列并接收消息。这种方式通常用于发送异步事件或消息：

// 创建一个消息队列
const messageQueue = new MessageChannel()

// 在父应用中向消息队列发送消息
const sendMsg = (msg) => {
  messageQueue.port1.postMessage(msg)
}

// 在子应用中监听消息队列
addEventListener('message', (e) => {
  // 处理接收到的消息
})