React Dev Tools性能分析器为何显示两个AppContainers？

两个AppContainers的含义 #

这两个AppContainers对应页面中两个独立的React根实例，常见原因包括：

• 主应用根容器 + 第三方工具/组件库额外挂载的React实例（比如部分埋点SDK、UI组件会独立挂载自己的React节点）
• 代码中重复调用了ReactDOM.render()或createRoot().render()，意外创建了第二个React应用根
• 开发环境热更新残留，或者微前端架构下子应用与主应用的React实例同时被识别

不同实例的性能数据不同，是因为它们各自对应独立的React渲染树，渲染逻辑和更新频率完全分开。

恢复到无需选择状态的方法 #

• 排查代码：检查是否存在重复挂载React根的逻辑，比如在多个文件中调用根渲染方法，或者条件判断错误导致重复执行
• 排查第三方依赖：暂时禁用近期新增的插件、SDK，验证是否是它们额外创建了React实例
• 清理环境：重启开发服务器，清空浏览器缓存并强制刷新页面，消除热更新带来的残留实例
• 微前端场景：检查子应用的挂载配置，确保子应用激活时才挂载，避免与主应用根实例同时存在

内容的提问来源于stack exchange，提问作者Mr. Robot