多ReactDOM.render同时调用的性能影响及React微前端迁移疑问

背景 #

现有大型单页应用（SPA）采用单 ReactDOM.render 实现，因遗留代码问题无法直接升级到 React 18。计划将其拆分为多个独立子应用（微前端），要求保持单部署、共享内存缓存、SPA 体验，同时支持渐进式迁移。目前已完成两个子应用的 POC，当前实现逻辑是路由匹配时才执行 ReactDOM.render 或卸载组件，理想方案是为每个子应用设置独立的 AppEntryPoint 并调用 ReactDOM.render。

咨询问题 #

1. 初始调用 ReactDOM.render 的性能开销有多大？
2. 同时启动 30+ 个 ReactDOM.render 会带来哪些性能影响？
3. 该方案是否存在容易被忽略的严重问题？

解答 #

1. 初始 ReactDOM.render 的性能开销 #

单次 ReactDOM.render 的开销主要来自三部分：

• React 内部初始化：创建 Fiber 根节点、绑定基础事件监听、初始化调度器等，属于轻量一次性操作，开销极小。
• 组件树渲染：取决于子应用初始组件的复杂度，若子应用首屏组件少、无复杂计算/状态逻辑，这部分开销可忽略；若包含大量列表、嵌套高阶组件，则渲染时间随复杂度线性增长。
• DOM 操作：将虚拟 DOM 转换为真实 DOM 的开销，这是首次渲染的主要成本，但仅在初始化时产生，后续更新为 diff 操作。

总体来说，单次初始 ReactDOM.render 在多数场景下不会成为性能瓶颈，除非子应用本身的首屏渲染逻辑过重。

2. 同时启动 30+ 个 ReactDOM.render 的性能影响 #

若同时执行30+次ReactDOM.render，会引发以下明显问题：

• 主线程阻塞：React 首次渲染为同步操作，连续30次渲染会占据主线程，导致页面卡顿、交互无响应，直到所有渲染完成。
• 内存占用飙升：每个ReactDOM.render会创建独立的 Fiber 树、根节点和事件系统，30+个实例会大幅增加内存占用，低配置设备可能出现内存不足、页面崩溃。
• 资源竞态风险：若子应用共享全局缓存/状态，同时初始化可能导致数据不一致，需要额外处理同步逻辑。
• 首屏体验极差：用户需等待所有子应用渲染完成才能使用页面，启动时间会被大幅拉长。

但如果是路由匹配时按需渲染（仅当前路由对应子应用执行ReactDOM.render，其余不初始化），30+个子应用的存在不会有问题，同一时间仅一个子应用在渲染。

3. 易被忽略的严重问题 #

• 全局状态/缓存冲突：多个独立 React 根实例无天然状态同步机制，若子应用直接修改共享缓存，易导致其他子应用状态不一致，需额外实现状态同步中间层。
• 事件监听重复绑定：每个 React 根实例会独立绑定全局事件（如click、scroll），30+个实例会导致监听重复绑定，增加内存开销，还可能引发事件触发顺序混乱、多次执行的问题。
• 样式污染风险：单部署模式下，子应用的 CSS 易相互污染，即使使用 CSS Modules，也可能因类名哈希冲突、全局样式（如body/html样式）导致页面样式错乱。
• React 版本兼容问题：若后续部分子应用升级到 React 18，其余仍用旧版本，多 React 实例共存会导致 Hooks 失效、Context 无法共享等问题，需确保所有子应用使用同一版本的 React 和 ReactDOM。
• 卸载清理不彻底：路由切换时仅调用ReactDOM.unmountComponentAtNode，可能残留定时器、事件监听、订阅等，长期积累会引发内存泄漏。

内容的提问来源于stack exchange，提问作者Bogdan Gishka