反应卸载的组件作为分​​离保留在内存中*

Question

我有一个使用 Redux 的 React 应用程序。问题是在我在许多组件之间切换并转到主屏幕（这是一个简单的组件）后，Chrome 分析器显示未安装组件的所有节点都变成了 valueInput.value，例如//add is button element const add = document.querySelector(".add"); //value is input element const valueInput = document.querySelector(".value"); const arr = []; add.addEventListener("click", () => { arr.push({ text: valueInput.value }); console.log(arr); });、<input type="text" placeholder="Insert text" class="value" /> <button class="add">add</button> 等。我尝试在一个全新的 React 应用程序中重现这个问题，但它的行为有所不同。它不会将卸载的组件保存在内存中。

重新创建的示例：

RelatingPropertyDefinition

export interface TestType {
  resultType?: 'NUMBER' | 'STRING' | 'DATE' | 'ENUM' | 'AMOUNT' ;
}

const types: string[] = ['NUMBER', 'STRING', 'DATE', 'ENUM', 'AMOUNT'];

内存分析器显示切换组件后未使用的节点被删除

但在实际应用中，它们看起来像这样

持有分离节点的陷阱是什么？我知道该示例不能重复它所具有的所有功能（useEffect 等...），尽管如此，逐个分析它可能需要很多时间。