Javascript React未安装的组件在分离时仍保留在内存中*

我有一个React应用程序，它使用Redux。问题是在我在许多组件之间切换并转到主屏幕（这是一个简单的组件）后，Chrome profiler显示，未安装组件中的所有节点都变得

分离*

，例如

分离的InternalNode

，

分离的EventListener

，等等。我尝试在一个全新的React应用程序中重新创建该问题，但它的行为不同。它不会将未安装的组件保存在内存中

重新创建的示例：

import './App.css';
import {useState} from "react";
import Component1 from "./Component1";
import Component2 from "./Component2";
 
const App = () => {
 
    const [showComponent, setShowComponent] = useState(1);
 
    return <div className="App">
        <button
            onClick={() => {
                setShowComponent(showComponent === 1 ? 2 : 1)
            }}
        >
            change
        </button>
        {showComponent === 1 ? <Component1/> : <Component2/>}
    </div>
}
 
export default App;

import'/App.css'；
从“react”导入{useState}；
从“/Component1”导入组件1；
从“/Component2”导入组件2；
常量应用=（）=>{
const[showComponent，setShowComponent]=useState（1）；
返回
{
设置显示组件（显示组件===1？2:1）
}}
>
改变
{showComponent==1？：}
}
导出默认应用程序；

从“React”导入React；
常量组件1=（）=>{
常数数组_len=100；
const randomArray1=Array.from（{length:Array_len}，（）=>Math.floor（Math.random（）*Array_len））；
const randomArray2=Array.from（{length:Array_len}，（）=>Math.floor（Math.random（）*Array_len））；
返回
{randomArray1.map（（项目，索引）=>{
return

https://pastebin.com/      {item}
{randomArray2.map（（项目，索引）=>{
return

{item}

})}

})}
}
导出默认组件1；

从“React”导入React；
常量组件2=（）=>{
返回简单组件
}

内存探查器显示，在切换组件后，未使用的节点被删除

但在真正的应用程序中，它们看起来是这样的

分离节点的陷阱是什么？我知道这个例子不能重复它的所有功能（useEffect等），但是逐个组件地分析它可能需要很多时间

import React from 'react';
 
const Component1 = () => {
 
    const array_len = 100;
    const randomArray1 = Array.from({length: array_len}, () => Math.floor(Math.random() * array_len));
    const randomArray2 = Array.from({length: array_len}, () => Math.floor(Math.random() * array_len));
 
    return <>
        {randomArray1.map((item, index) => {
            return <ul key={index}>
          https://pastebin.com/      {item}
                {randomArray2.map((item, index) => {
                    return <li key={index}>
                        {item}
                    </li>
                })}
            </ul>
        })}
 
    </>
}
 
export default Component1;

import React from 'react';

const Component2 = () => {

    return <>Simple component </>

}