一、微前端生命周期

跟应用一样，微前端在存在生命周期，那微前端的生命周期主要用来处理，子应用的卸载、加载和渲染

当子应用进行切换的时候，针对于上一个子应用，需要卸载，针对于下一个子应用，需要加载。 产生的问题：如何去获取上一个子应用和下一个子应用？

• 如何获取子应用

  • 在 main/micro/utils/index.js 中 isTurnChild 方法中，判断

      // 将__CURRENT_SUB_APP__ 当前的子应用复制给 __ORIGIN_APP__ 变量属性
      window.__ORIGIN_APP__ = window.__CURRENT_SUB_APP__
     
      if (window.__CURRENT_SUB_APP__ === window.location.pathname) {
          return false
      };
      // 使用正则匹配路由获取需要加载的子应用
      const currentApp = window.location.pathname.match(/(\/\w+)/)
      if (!currentApp) return
      // 将匹配到的当前子应用赋值给 __CURRENT_SUB_APP__ 属性
      window.__CURRENT_SUB_APP__ = currentApp[0]
      return true

• 微前端的生命周期

  • 在 main/micro/ 中新建 lifeCycle/index.js，暴露生命周期方法 lifeCycle

    import { findAppByRoute } from '../utils'
    import { getMainLifeCycle } from '../constant/mainLifeCycle'
    
    export const lifeCycle = async () => {
      // 获取到上一个子应用
      const preApp = findAppByRoute(window.__ORIGIN_APP__)
      // 获取到要跳转到的子应用
      const nextApp = findAppByRoute(window.__CURRENT_SUB_APP__)
      if (!nextApp) return
      if (JSON.stringify(preApp) !== '{}') {
          await destoryed(preApp)
      }
      const app = await beforeLoad(nextApp)
      await mounted(app)
    }
    
    export const beforeLoad = async (app) => {
      await runMainLifeCycle('beforeLoad')
      app && app.beforeLoad && app.beforeLoad()
      const appContext = null
      return appContext
    }
    
    export const mounted = async (app) => {
      app && app.mounted()
      await runMainLifeCycle('mounted')
    }
    
    export const destoryed = async (app) => {
      app && app.destroyed && app.destroyed()
      // 对应的执行以下应用的生命周期
      await runMainLifeCycle('destroyed')
    }
    
    export const runMainLifeCycle = async (cycle) => {
      const mainLife = getMainLifeCycle()
      await Promise.all(mainLife[cycle].map(async item => await item()))
    }

  • 在 main/micro/utils/index.js 中，新建 findAppByRoute 方法

    export const findAppByRoute = (router) => {
      return filterApp('activeRule', router)
    }

  • 在 main/micro/router/routerHandle.js 中，调用微前端的生命周期

    export const turnApp = async () => {
      if (isTurnChild()) {
          // 微前端的生命周期运行
          await lifeCycle()
      }
    }