在React应用中分离HTMLDivElement的原因

Question

我一直在调试React / Redux应用程序的内存探查器中的内存问题，并且我注意到这些Detached HTMLDivElements以及一些其他类型的元素。

我没有使用典型的导航库，而只是使用状态来移动屏幕。我不确定这是Chrome的问题，还是Garbage Collector或React并以某种方式持有对旧屏幕的引用。

React应用程序保留这些分离元素会有什么原因。可能connect()可能会保留对商店的引用，从而导致组件无法回收？

最后，我应该说这是一个作为Chrome扩展程序的React / Redux应用。

---

深入研究这个问题，我发现类Messenger（保存聊天消息逻辑的根组件）在Memory Profiler中列出了3次。

这是我构建屏幕的方式。

renderScreen = () => {

   switch (this.state.screen) {
      case Screen.HOME:
         return <Home/>
      case Screen.MESSENGER:
         return <Messenger/>
      ....

   }
}

render() {
   ...
   return this.renderScreen()

}

这是否意味着每次导航到该组件时都会创建一个新的类Messenger？