React Virtual Dom内存根节点位置及存储路径相关问题问询

Virtual DOM在React 16+版本后已重构为Fiber树架构，其根引用的存储位置分版本有差异，具体如下：

React 18+ #

• 调用ReactDOM.createRoot(容器DOM)返回的根实例对象直接持有Fiber根节点引用，该实例的_internalRoot属性即为Fiber树的入口，整个Fiber树以链式对象结构存储在JS堆内存中。
• 若未保存createRoot的返回值，可从挂载的真实容器DOM上查找：容器DOM会自带一个命名格式为__reactContainer$随机后缀的私有属性，该属性的值就是根实例，可顺着拿到完整的Fiber树引用。

React 16 ~ React 17 #

• 这个区间的版本使用ReactDOM.render()接口挂载应用，Fiber根引用直接挂载在容器DOM的私有属性上，属性命名格式为__reactInternalInstance$随机后缀，整个Virtual DOM树通过该根节点的子、兄弟、返回指针串联留存。

React 15及更早版本 #

• 旧版栈协调器的Virtual DOM根引用挂载在容器DOM的__reactInternalInstance属性上，整棵虚拟DOM树为普通JS对象树结构，通过该根引用常驻内存。

只要应用未调用卸载接口、挂载的容器DOM未被完全销毁且无引用释放，Virtual DOM树的根引用就会持续存在，不会被JS垃圾回收机制清理。

内容的提问来源于stack exchange，提问作者Nick