Fiber挂载是组件首次渲染过程,本质为构建workInProgress树并创建DOM节点;它仅作用于单个React Root实例,不支持子应用挂载,微前端需用qiankun、Module Federation或iframe实现。

在React Fiber架构中,不存在“挂载子应用”这一操作概念——Fiber是React内部的协调与渲染机制,不是用于跨应用集成的路由或挂载工具;所谓“子应用”属于微前端范畴,需由qiankun、Module Federation等方案实现,与Fiber的mount阶段完全无关。
Fiber挂载(mount)的本质是组件首次渲染
React组件首次插入DOM时,Fiber协调器启动mount流程,构建workInProgress树并完成DOM节点创建与属性初始化。
第一步:调用ReactDOM.createRoot(rootNode).render(
第二步:React生成FiberRootNode,并初始化根Fiber节点(tag为HostRoot),其stateNode指向DOM容器元素。
第三步:进入render阶段,执行beginWork→completeWork递归遍历。对每个HostComponent(如div、img),调用createInstance创建真实DOM节点,并通过appendAllChildren挂载到父节点下。
第四步:在completeWork中调用finalizeInitialChildren设置初始props(如className、src),最终将完整DOM树提交到页面。
注意:这整个过程不涉及任何“子应用”概念,【所有Fiber节点都属于同一React Root实例】,无法通过Fiber API挂载另一个独立React应用。
为什么不能用Fiber mount实现子应用隔离
Fiber的mount仅作用于单个React Root下的组件树,依赖共享的FiberRootNode、updateQueue和双缓存机制(current ↔ workInProgress)。
若强行在同一个DOM容器内多次调用ReactDOM.createRoot().render(),会触发React警告:“Root provider already exists”,且后一次render将完全覆盖前一次的Fiber树和状态。
试图复用Fiber节点跨应用传递或“注入”子应用,会导致【alternate指针错乱、effect list污染、stateNode冲突】,立即引发不可恢复的渲染错误。
真正可行的子应用集成方式
方法一:使用qiankun框架
主应用通过registerMicroApps注册子应用URL,qiankun拦截HTML加载、沙箱隔离JS执行环境、动态挂载子应用DOM到指定容器。
方法二:采用Module Federation
Webpack 5+配置remote应用暴露模块,主应用通过import('xxx')动态加载远程React组件,运行时由联邦模块系统解析并挂载,不依赖Fiber机制。
方法三:iframe嵌套(最轻量隔离)
直接在主应用中插入


















