react18 新特性 ReactDOM.createRoot问题

[LiucCheng]

最近在构建微前端框架，在使用飞冰时候react18环境，首次进入微应用正常，再次切换回来，则会报错root是空，由于主应用回调的unmount事件执行了unmount()方法，导致无法进行再次渲染问题。 微应用

报错问题，经过排查，是无法再次渲染上，应该跟react18更新的特性有关，跟18一下的版本使用略有不同

希望可以尽快对react18进行兼容，我尝试过，使用react18下，乾坤框架都会出问题

[maoxiaoke]

好的，我们会尽快支持下

[maoxiaoke]

参考下这个设置：

import ReactDOM from 'react-dom/client'
import { isInIcestark } from '@ice/stark-app';
import './index.css'
import App from './App'

let root: ReactDOM.Root;

if (!isInIcestark()) {
  root = ReactDOM.createRoot(document.getElementById('root') as Element);
  root.render(<App />)
}

export function mount ({ container, customProps }: { container: HTMLElement,  customProps: object}) {
  root = ReactDOM.createRoot(container);
  root.render(<App />)
}

export function unmount({ container }: { container: HTMLElement }) {
  root.unmount()
}

[maoxiaoke]

@LiucCheng 需要在 mount 周期重新 re-create root 节点。

[LiucCheng]

这个方案我之前也尝试过了。刚刚看你这边处理，我也尝试了下，会有如下警告

主应用我是新建react进行引入相关功能的，在使用react18的时候，AppRoute组件无法监听路由变化，我重新更改到React17版本后，又是可以正常切换路由的。react18挂载之后，不能再次使用ReactDOM.createRoot进行重新挂载的

[maoxiaoke]

@LiucCheng 主应用也升级了 react18 吗？上面这个 warning 是微应用独立运行出现的？

[LiucCheng]

@maoxiaoke 主应用和微应用都是react18，切换的时候就一直会报这个错误，微应用独立运行没有问题。结合主应用就会报上面的错误。

同时根据API的配置，我配置了react17的，但是在主应用进入微应用某个页面，再微应用进入主应用的某个界面时就会报错，查看了都是卸载后更新了状态的原因，包括问题中的 https://micro-frontends.ice.work/error/?code=4&arg=microApp1&arg=unloadMicroApp

微应用重新返回到主应用页面的时候，就会拿不到微应用的注册，看了下微应用是空的数组

https://user-images.githubusercontent.com/29134803/167986159-c731f863-ecf2-4bb0-89e4-afc8fd8f27e4.mov

我的主应用是这么配置的：

我的微应用是这么配置的

[maoxiaoke]

@LiucCheng

在主应用的使用上，建议主应用的路由也作为子应用。

https://micro-frontends.ice.work/docs/guide/use-layout/react#%E4%B8%BB%E5%BA%94%E7%94%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E5%8C%85%E5%90%AB%E8%B7%AF%E7%94%B1%E9%A1%B5%E9%9D%A2

[maoxiaoke]

至于报错，是否跟这个有关 https://github.com/ice-lab/icestark/issues/521#issuecomment-1020845742

如果不影响渲染，可以暂时忽略这个错误。

[LiucCheng]

@maoxiaoke 好的，我看看，目前都是在新版本上会出现问题，在低版本的时候是正常的，只是不想使用相对低版本的。 目前还有一个问题，是使用react-router 6的版本，在使用AppRouter时的render是路由渲染是无效的无效的，降级下来的react-router是可以切换的，react-router6是使用Routes 和 Route组合，弃掉了Swift的 这种切换是无效的