有關於虛擬DOM

2022-09-11 14:06:23 字數 409 閱讀 2591

在react中,render執行的結果得到的並不是真正的dom節點,結果僅僅是輕量級的j**ascript。虛擬dom只對頁面上真正變化的部分進行操作,所以我們不需要擔心效能問題,可以瘋狂地重新整理頁面。

virtual dom加了一些特別的步驟來避免了整棵dom樹變更過

dom很慢,元素也非常強大。操作他們的適合要小心翼翼,一不小心就可能導致頁面重排。

步驟:- 1.用j**ascript物件結構表示dom樹的結構,用這個樹構建乙個真正的dom樹,插到文件當中

- 2.當狀態變更時,重新構造一棵新的物件樹,然後新的和舊的樹進行比較

- 3.記錄上一步的兩棵樹的差異應用到第一步所構建的真正的dom樹上,此時檢視就更新了。
virtual dom本質上就是在js和dom之間做了乙個快取

虛擬dom 虛擬 DOM 和 DOM diff

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

虛擬DOM與真實DOM

先來個簡單的react例子 1.建立虛擬dom const vdom hello react h1 此處不要寫引號,因為不是字串 2.渲染虛擬dom到頁面 reactdom.render vdom document.getelementbyid test script head test div b...

關於HTML5有關DOM操作的學習

最近學習了 html5中有關 dom操作的部分,在這裡做些記錄。在傳統的 js開發中,查詢 dom 往往是開發人員遇到的第乙個頭疼的問題,原生的 js所提供的 dom 選擇方法並不多,僅僅侷限於通過 tag,name,id 等方式來查詢,這顯然是遠遠不夠的,如果想要進行更為精確的選擇不得不使用看起來...