Virtual DOM 到底存储在哪里？答案

【问题标题】：Where exactly the Virtual DOM is stored?Virtual DOM 到底存储在哪里？
【发布时间】：2020-03-26 00:43:51
【问题描述】：

我已经折磨自己好几个小时了，却找不到答案。 React 数据到底在哪里，在什么对象/键下？我发现了一个对象ReactRoot，它似乎存储了有关组件的所有信息，但我不知道它在窗口中的位置（我猜？）对象。

它必须在 window 对象下的某个地方，对吧？

如果您拍摄内存快照并从列表中选择ReactRoot 构造函数，chrome 将在$0 ($0 in chrome) 下创建对它的引用。

编辑

是否有可能 ReactRoot 的声明方式使其他对象无法访问它？这在js中怎么可能？ React 没有得到浏览器的任何特殊处理，是吗？

【问题讨论】：

我对 react 几乎一无所知，但考虑到它可以在外部无法访问的本地/函数范围内声明的可能性。可能不是来自全局对象的路径。
为什么它需要在窗口对象下？它由 React 维护。它可能在窗口上，但这会带来不适当的访问风险，因此似乎不太可能。
问题是：你想对这些对象做什么？它们是反应渲染机制的一部分，或多或少是私有的
等等，你是说 js 脚本可以在没有其他外部对象访问的神奇地方分配内存吗？我不想用它做任何事情，我只是一个好奇的人。
@platinum_ar 这句话“窗口对象是最根元素，其他所有东西都直接或间接地附加到它上面。”是完全错误的。（顺便说一句，“BOM 没有官方标准”）。也不清楚他们所说的“附加”是什么意思。

标签： javascript reactjs google-chrome-devtools react-fiber

【解决方案1】：

有一个document 解释DOM Level 1 基本方法。另请参阅DOM Level 1 Core specification from the W3C。

当您创建一个元素时，该元素的一个新实例已创建但未呈现。直到将它们包含到 DOM 树中。

浏览器只会呈现文档正文中的元素。但其他一切都只是对象的一个实例，即虚拟 DOM。

// create a new Text node for the second paragraph
    var newText = document.createTextNode("This is the second paragraph.");
    // create a new Element to be the second paragraph
    var newElement = document.createElement("P");

【讨论】：

这与 React 或它在内存中存储对象的位置无关。