React页签切换重新挂载与设置display=none的性能内存差异及规范问询

1. 两种方案的速度表现对比 #

两种方案的速度优势对应不同场景：

• 首屏加载阶段：方案1（单次仅挂载1个页面）表现更优。它仅需要渲染当前激活页的组件与DOM，初始渲染计算量、资源开销都更低，白屏等待时间更短；方案2需要一次性渲染所有页面的完整DOM树，首屏加载耗时会明显更高。
• 页签切换阶段：方案2（全量挂载+display: none隐藏）表现更优。所有页面已经完成挂载、数据请求与渲染，切换时仅需要修改CSS属性即可完成展示切换，不需要走组件挂载、生命周期执行、DOM渲染的完整流程，切换延迟极低，体感更流畅。

2. 两种方案的内存表现对比 #

方案1的内存表现明显更优。它同一时间仅会保留当前激活页面的组件实例、DOM节点、状态数据，切换时旧页面的所有相关资源都会被React销毁并由垃圾回收机制回收，内存占用始终维持在较低的可控水平。
方案2会让所有页面的组件实例、完整DOM树、内部状态长期驻留内存，页面数量越多、单页内容复杂度越高，内存占用就越大，页面数量较多时很容易出现内存占用过高导致的应用卡顿、崩溃问题。

3. 行业通用标准实践 #

方案1是行业通用的标准实践。包括React Router在内的绝大多数React路由生态的默认逻辑都基于该方案实现，它的内存开销可控、首屏性能优异，能够适配90%以上的业务场景。
仅在页签切换流畅度要求极高、页签总数少且页面内容复杂度低的特殊场景下，才会选择方案2作为补充实现，比如高频操作的固定后台页签、短流程多步骤表单这类场景。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture