icestark

icestark copied to clipboard

背景

// frameworkLayout
const layout = isTrue ? layout1 : layout2;

return <layout>{children}</layout>

• 根据不同flag切换不同layout
• 由于是frameworkLayout，所以切换的时候会触发children的重渲染，从而触发子应用重新加载(猜测)
• 而又由于这个flag切的太快，导致第一次子应用还没完全加载就重新加载了第二次
• 就会出现

icestark minified message #4: Can not find app /a when call unloadMicroApp. See https://micro-frontends.ice.work/error?code=4&arg=/union&arg=unloadMicroApp

需求

• 如何避免这种情况发生，或者避免这个提示出现

@xmsz 官方的 demo 能复现这个问题吗？FrameworkLayout 切换的话，正常来说不会重新注册微应用（即 getApps 这个方法在主应用只调用一次），也就不会提示找不到。

@xmsz 官方的 demo 能复现这个问题吗？FrameworkLayout 切换的话，正常来说不会重新注册微应用（即 getApps 这个方法在主应用只调用一次），也就不会提示找不到。

官方Demo

// FrameworkLayout

import { useEffect, useState } from 'react';

const Layout1 = ({ children }: any) => {
  return (
    <>
      Layout1
      {children}
    </>
  );
};
const Layout2 = ({ children }: any) => {
  return (
    <>
      Layout2
      {children}
    </>
  );
};

export default function FrameworkLayout(props: {
  children: React.ReactNode;
  pathname: string;
  appLeave: { path: string };
  appEnter: { path: string };
}) {
  const { pathname, children, appLeave, appEnter } = props;
  const [a, setA] = useState('1');
  const Layout = a === '1' ? Layout1 : Layout2;

  useEffect(() => {
    setTimeout(() => {
      setA('2');
    }, 0);
  }, []);

  return <Layout pathname={pathname}>{children}</Layout>;
}

这样可以复现

还有我发现和快速切换值没关系，我之前的猜测有误

useEffect(() => {
    setTimeout(() => {
      setA('2');
    }, 0);
  }, []);

• 这个setTimeout设置1000也会触发

排查了下问题原因

1. 由于切换 layout 会导致 AppRouter 重渲染（父组件渲染导致子组件渲染）
2. AppRouter 的 componentWillUnmount 早于 AppRoute 组件的 componentWillUnmount 触发 https://codesandbox.io/s/infallible-sun-0o82j
3. 在两者的 componentWillUNmount 生命周期中，都处理了清理操作 https://github.com/ice-lab/icestark/blob/master/packages/icestark/src/AppRouter.tsx#L112

这个问题最终有解决方案不，如果是通过AppRoute方式注册

情况怎么样？现在layout状态切换还是会导致子应用重复卸载

apps.js:455 icestark minified message #4: Can not find app /push/mass when call unloadMicroApp. See https://micro-frontends.ice.work/error?code=4&arg=/push/mass&arg=unloadMicroApp
http://127.0.0.1:3061 应用卸载
useCheckUpdate.tsx:32 /push/mass 初始化
icestark minified message #4: Can not find app /push/mass when call unloadMicroApp. See https://micro-frontends.ice.work/error?code=4&arg=/push/mass&arg=unloadMicroApp
http://127.0.0.1:3061 应用卸载
useCheckUpdate.tsx:32 /push/mass 初始化

或者有什么办法可以先绕过吗？