Virtual DOM 系列三 Diff演算法

dom操作是昂貴的，為了減少dom操作，才有了virtual dom。而virtual dom的關鍵就是通過對比新舊vnode，找出差異部分來更新節點。對比的關鍵演算法就是diff演算法。

歷史由來：

diff演算法歷史悠久，並不是虛擬dom提出來的。早在linux系統中，就有diff命令，用於比較兩個文字的差異，還有乙個最常用的就是git diff命令，由於比較兩個版本之間的差異。virtual dom的演算法是用來對比新舊虛擬dom的差異。

核心邏輯：

1. createlement

首先先來分析patch函式的第一種用法：patch(container, vnode).。如何把虛擬dom轉化成真正的dom?

假設每個節點都包含tag,props,children三個屬性（按最簡單的情況考慮）

step 1: 建立節點；

step 2: 設定屬性；

step 3; 遍歷子節點，子節點也需要結果step1,2,然後加到當前節點中。

經過分析，我們發現創鍵dom,需要用到遞迴。

**模擬如下：

function createelement(vnode) ;//獲取元素的屬性

var children = vnode.children || ;//獲取子節點
if (!tag) 
var ele = document.createelement(tag);//step1:建立元素
// step2:設定屬性
var attrname;
for (attrname in props) 
}  //step3:深度遍歷子元素,並插入當前節點
children.foreach(element => );
return ele;
}

假設只考慮最簡單的情況，只改變以下標籤的值。

注：以上**都是偽**，只考慮了最簡單的情況。

總結：

實際diff演算法非常複雜，還需考慮節點的新增，刪除；節點的重新排序；節點屬性、樣式、事件的繫結等。

1. virtual dom是什麼？為何使用vd?

虛擬dom

用js模擬dom結構

dom操作非常昂貴

將dom對比放在js層，提高效率

2. 核心api

h('h('this is vn

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

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

3. diff演算法

createlement，updatechild邏輯

Virtual DOM 系列二 核心API

為了更好的研究virtual dom，我選擇了snabbdom來學習。相比vue來說，snabbdom對於研究虛擬dom更好，因為它裡面沒有其他干擾的東西，而且原始碼也比較少，因此研究起來更方便。1.初次體驗虛擬dom的魅力 首先我們先用snabbdom重寫之前的例子 change 點選change...

SpringBoot2系列教程（三）DI依賴注入

我們用spring framework技術來定義bean及其注入的依賴關係。一般，我們用 componentscan 來裝載bean 和用 autowired 來裝載構造方法。如果在啟動類上有 componentscan註解。component，service，repository，controll...

Spring入門（三）之DI

spring的di，即依賴注入，個人理解，就是給屬性賦值。概念性的東西，不多說了。需要專案 點這裡。spring給屬性賦值，有2種方式，一是通過有參建構函式，二是通過set方法。1.實體類 有兩個建構函式 public class person public person string id,str...