Virtual DOM 系列二 核心API

2022-03-23 00:18:18 字數 612 閱讀 5241

為了更好的研究virtual dom,我選擇了snabbdom來學習。相比vue來說,snabbdom對於研究虛擬dom更好,因為它裡面沒有其他干擾的東西,而且原始碼也比較少,因此研究起來更方便。

1. 初次體驗虛擬dom的魅力

首先我們先用snabbdom重寫之前的例子:

change

點選change,發現只修改了有差異的地方。對比之前jquery清空整個div,效能上有很大提公升,特別是在複雜應用上。

2. 實現原理

通過上面snabbdom的例子,我們發現有兩個核心的api:

1. h函式(將真實dom對映成虛擬節點);

h('h('this is vn

2. patch函式(通過對比新舊虛擬節點,找出差異(diff演算法),再把這些變化更新到真實dom中)

patch(container, vnode)//初次渲染

patch(oldvnode, newvnode); //re-render

Virtual DOM 系列三 Diff演算法

dom操作是昂貴的,為了減少dom操作,才有了virtual dom。而virtual dom的關鍵就是通過對比新舊vnode,找出差異部分來更新節點。對比的關鍵演算法就是diff演算法。歷史由來 diff演算法歷史悠久,並不是虛擬dom提出來的。早在linux系統中,就有diff命令,用於比較兩個...

核心函式系列

如果我們了解系統呼叫表有關知識,也已知道如何攔截系統呼叫表中的函式,那麼下面,我們再來了解一下我們要鉤取的函式 目標函式。這方面,如果我們不僅了解系統呼叫表中有哪些函式,還知道這些函式的工作機制就最好了。但實際上,ntdll.dll 中的匯出函式有好幾百個,別說乙個乙個的 就是把它們都列出來,看著看...

android 核心系列

編譯 1,需要jre1.6,64bit的機器。2,錯誤 this attribute must be localized 提示了錯誤 this attribute must be localized 這種問題一般情況是因為在res xml資料夾下的中 或者在res layout下的檔案中出現了沒有多...