跳至正文
Wener Notes

inside single-spa

约 1 分钟阅读
标签:洞察

生命周期

  • app 默认挂载节点
    • single-spa-application:${appName}
  • 应用 生命周期
    • load - js 执行时
    • bootstrap
    • mount
    • unmount
    • update
    • unload
      • 调用 unloadApplication 时发生
  • single-spa 不解决 托管、构建、部署 问题
  • 优先使用框架组件 (例如: React, Vue, Angular 组件) 而不是 single-spa parcels
JavaScript
singleSpa.registerApplication({
  name: 'myApp',
  app: () => import('src/myApp/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: (name, location) => ({
    some: 'value',
  }),
});
JavaScript
function bootstrap(props) {
  const {
    name, // The name of the application
    singleSpa, // The singleSpa instance
    mountParcel, // Function for manually mounting
    customProps, // Additional custom information
  } = props; // Props are given to every lifecycle
  return Promise.resolve();
}
  • 触发时机
    • hashchange, popstate 事件
    • pushState, replaceState
    • triggerAppChange
    • checkActivityFunctions

应用状态

statefor
NOT_LOADED还未加载
LOADING_SOURCE_CODE加载源码
NOT_BOOTSTRAPPED已加载源码,未启动
BOOTSTRAPPING启动中
NOT_MOUNTED启动,未挂载
MOUNTING挂载中
MOUNTED已挂载
UPDATING
UNMOUNTING
UNLOADING
LOAD_ERROR源码加载失败
SKIP_BECAUSE_BROKENload,bootstrap,mount,unmount 异常

关联信息

反向链接、本文链接的其他页面和外部资料。

参考资料

GitHub1 条
最近更新commit 9a04d0f编辑