react的虛擬dom是以什麼形式存儲在哪裡的？

最近在學習react，想知道react的虛擬dom是儲存在哪裡的？是內存中嗎？是以什麼形式存儲的呢？

---

存在硬碟里（手動滑雞

當然是存在內存里啦，被 ReactDOM 渲染出來的 DOM element，都有一個屬性，指向了這個 DOM Element 的 ReactDOMComponent 實例。

function getClosestInstanceFromNode(node) {
if (node[internalInstanceKey]) {
return node[internalInstanceKey];
}
...


react/ReactDOMComponentTree.js at master · facebook/react · GitHub

在這個 ReactDOMComponent 實例里，又有一個屬性 ._currentElement 指向該 component 的 ReactElement 實例。

function ReactDOMComponent(element) {
var tag = element.type;
validateDangerousTag(tag);
this._currentElement = element;
...


react/ReactDOMComponent.js at master · facebook/react · GitHub

ReactComponent 實例的 .render() 被調用時，返回新的 ReactElement 實例

_renderValidatedComponentWithoutOwnerOrContext: function() {
var inst = this._instance;

if (__DEV__) {
if (this._debugID !== 0) {
ReactInstrumentation.debugTool.onBeginLifeCycleTimer(
this._debugID,
render
);
}
}
var renderedComponent = inst.render();
...


react/ReactCompositeComponent.js at master · facebook/react · GitHub

ReactDOM 會先比較這個組件的 prev ReactElement 和 next ReactElement ，對 DOM element 做相應的更新

react/ReactDOMComponent.js at master · facebook/react · GitHub

綜上我們可以看到，React 裡面對 DOM 的表示是虛擬的。React 實際上並不依賴 DOM ，節點的層級關係保存在 ReactDOMComponent 和 ReactElement 實例里。

如果業務代碼沒有直接用到瀏覽器 DOM API ，可以把 ReactDOM renderer 替換成其他 render 。

react/src/renderers at master · facebook/react · GitHub

名次解釋

ReactComponent: React.Component 的子類

DOM element: 網頁 DOM tree 中的 element 節點

ReactDOM: React DOM renderer , 把 ReactComponent 實例渲染成 DOM Element

ReactDOMComponent: ReactDOM 對於 DOM element tree 的虛擬表示(virtual representation)

ReactElement: 調用 ReactComponent 實例的 render() ，會返回 ReactElement 實例，實質上是 plain js object

擴展閱讀

React 官方文檔

React (Virtual) DOM Terminology

以下是我關於 React 的一些答案，相當粗淺，希望對題主有幫助，也希望讀者多指正。

React解決了前端開發中的哪些痛點？ - 魯小夫的回答

createClass() 的返回值與 createElement() 的返回值有什麼關係？ - 魯小夫的回答

React.createClass中console.log(this)結果是Coustructor？ - 魯小夫的回答

React中的virtual dom是否可以理解為當前組件的view model? - 魯小夫的回答

如何理解react componentWillUnmount事件？ - 魯小夫的回答

react redux怎樣寫可重用組件？ - 魯小夫的回答

---

推薦閱讀：