微前端(qiankun)

qiankun沙箱隔离

• css沙箱采用了shadow DOM，Scoped CSS，Web Component
• js沙箱
• • snapshotSandbox
• • • 基于diff实现的沙箱
• • proxySandbox
• • LegacySandbox

沙箱都是在都是在生命周期mounted阶段激活，unmounted阶段卸载

qiankun的通信方式

内部提供了initGlobalState(state)方法

1. onGlobalStateChange 触发更新 监听state方法
2. setGlobalState 更新state
3. offGlobalStateChange 注销函数

主应用

// 初始化state
import { initGlobalState } from 'qiankun

consy state = initGlobalState(state)
state.onGlobalStateChange({state, prev} => {
    这里的参数state代表变更之后的的状态
    prev代表变更之前的状态
})
state.setGlobalState(state) // 更新
state.offGlobalStateChange() // 注销


微应用

// 从乾坤的生命周期 mount 中获取通信方法
export function mount(props){
    props.onGlobalStateChange({state, prev} => {
        
    })
    props.setGlobalState(state);
}