虛擬DOM和Diff演算法

虛擬dom其實就是在真實dom之前加了一層js物件生成的dom

把這個虛擬dom物件轉為真實的dom插入到頁面中

如果有事件修改了虛擬dom，比較兩個虛擬dom樹的差異，得到差異物件（補丁）

把差異物件應用到正則的dom樹上

比較同級的節點（同一父節點的子節點）

-  當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用於進一步的比較。這樣只需要對樹進行一次遍歷，便能完成整個dom樹的比較。對於不同層的節點，只有簡單的建立和刪除。

相同型別的節點比較：對屬性進行重設實現節點的轉換

rendera: 

renderb: 
=> [removestyle color], [addstyle font-weight 'bold']

// 節點類

class element
}// 生成節點類例項
function createelement(type,props,children)
// 建立乙個虛擬dom物件
let virtualdom= createelement('ul',,[
createelement('li',,['a']),
createelement('li',,['b']),
createelement('li',,['c'])        
])console.log(virtualdom)
// 設定屬性的方法
function setattr(node,key,value)else
break;
case 'style': 
node.style.csstext= value;
break;
default: 
node.setattribute(key,value)        
break;}}
// render方法將vnode 轉化成真實的dom
function render(eleobj)
// 遍歷父節點的children
eleobj.children.foreach(item => );
return el
}let el= render(virtualdom)
console.log(el)
// 將元素插入到頁面
function renderdom(el,target)
renderdom(el,document.body)

虛擬DOM和diff演算法

虛擬dom virtual dom 也就是我們常說的虛擬節點，它是通過js的object物件模擬dom中的節點，然後再通過特定的render方法將其渲染成真實的dom的節點。為什麼要使用虛擬dom呢，因為操作真實dom的耗費的效能代價太高，頻繁的操作dom，會大量的造成頁面的重繪和回流，出於效能優化...

虛擬DOM和 Diff演算法

1 用js來模擬dom中的節點。傳說中的虛擬dom。虛擬dom實現過程 1.根據真實dom產生虛擬dom?虛擬dom?就是乙個特殊物件 經過一些處理能產生真實dom 2.進行編譯解析 3.將虛擬dom 變成真實dom 也就 掛載 4.資料發生變化 產生新的虛擬dom 5 將資料變化後的虛擬dom 和...

React 虛擬 Dom 和 diff 演算法

react將dom抽象為虛擬dom,然後通過新舊虛擬dom 這兩個物件的差異 diff演算法 最終只把變化的部分重新渲染,提高渲染效率的過程 概念講完再描述一遍 一句話 用 js 物件的形式,來表現一棵真是的 dom 樹 傳統的 diff 演算法也是一直都有的 react 通過制定大膽的策略，將 o...