0

我有一个使用 Redux 的 React 应用程序。问题是在我在许多组件之间切换并转到主屏幕（这是一个简单的组件）之后，Chrome 分析器显示所有来自未安装组件的节点都变成了Detached*，例如Detached InternalNode，Detached 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 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 </>

}

内存分析器显示切换组件后未使用的节点被删除 在此处输入图像描述

但在真正的应用程序中，它们看起来像这样 在此处输入图像描述

持有分离节点的陷阱是什么？我知道该示例无法重复它具有的所有功能（useEffect 等），但是逐个组件分析它可能需要很多时间。

4

0 回答 0