虛擬DOM與真實DOM

先來個簡單的react例子~~

// 1.建立虛擬dom

const

vdom

=hello react<

/h1>

;//此處不要寫引號，因為不是字串

// 2.渲染虛擬dom到頁面

reactdom.

render

(vdom

,document.

getelementbyid

('test'))

;script

>

head

>

>

"test"

>

div>

body

>

html

>

console.log("虛擬dom",vdom);

console.log(typeof vdom);//檢視虛擬dom的型別
console.log(vdom instanceof object);//判斷虛擬dom是不是object的例項

接下來讓我們看看真實dom在**呢，其實這些都是真實的dom

"test"

>
div>

//獲取真實dom

const tdom = document.getelementbyid('test');

而虛擬dom只有這些東西

關於虛擬dom：

1.本質是object型別的物件(一般物件)

2.虛擬dom比較「輕」，真實dom比較「重」，因為虛擬dom是react內部在用，無需真實dom上有那麼多的屬性

3.虛擬dom最終會被react轉化為真實dom，呈現在頁面上。

虛擬DOM與真實DOM比較

首先，virtual dom並沒有完全實現dom，即虛擬dom和真正地dom是不一樣的，virtual dom最主要的還是保留了element之間的層次關係和一些基本屬性。因為真實dom實在是太複雜，乙個空的element都複雜得能讓你崩潰，並且幾乎所有內容我根本不關心好嗎。所以virtual do...

React虛擬DOM轉換為真實DOM

按照上面的猜想，那麼render方法的作用就是 render方法接收兩個引數，第二個引數沒什麼好說的，固定寫法，第乙個引數有以下幾種情況 類元件函式元件 文字 數字 class extends component 然後再來處理函式元件，函式元件的寫法是,直接就返回了dom 對於文字 數字，直接新增到...

虛擬dom 虛擬 DOM 和 DOM diff

乙個能代表dom樹的物件，通常含有標籤名 標籤上的屬性 事件監聽和子元素及其它屬性。虛擬dom在vue和react中的示例 const rnode classname red 標籤上的屬性 onclick 事件 ref null,type div 標籤名 or 元件名 const vnode 事件 ...