說明

• 本篇主要說明為什么要使用虛擬DOM技術,以及如何實現簡單的虛擬dom
• 您將會學到:
  1.原生JS對DOM的操作
  2.虛擬DOM的相關概念
  3.DIFF算法的基礎概念

---

為什么提出 -> DOM操作慢

• 我們使用createElement屬性來創建一個最常見的div,看看一個最常見的DOM有多少個屬性

<script>const div = document.createElement('div');let str = '';for(let key in div){str += key + ' ';}console.log(str);
</script>

• 可以看出,每個DOM其實是由很多內置的屬性.因此,當DOM元素的操作過多的時候,其性能可想而知.
• 這就迫使我們去想一個辦法去減少DOM操作

---

為什么提出 -> 對比Ajax技術的出現

• 早期的網頁交互,是整個頁面進行更新的.
• 但是大多數時候,用戶對頁面的操作,只是一小部分,這就導致了大多數更新是多余的.
• 于是產生了Ajax技術(網頁的部分更新)
• 可以模仿Ajax技術,去部分渲染DOM

---

為什么提出 -> DOM樹的概念

• 你可以會反駁,減少DOM的操作,不一定非要用到虛擬DOM,而可以直接對DOM進行操作.
• 這就得先理解DOM樹.
• 先看一個瀏覽器得請求過程:
  1.用戶輸入網址后,瀏覽器像服務器發送HTTP請求獲得HTML頁面
  2.得到頁面后,HTML解釋器、詞法分析器、語法分析器就會把HTML從字節流解釋成DOM樹的結構(過程比較復雜,也許會開一篇新文章具體說明)
  3.得到DOM樹后,WebKit會分批次的將結果詞語返回給渲染線程進行渲染
• 上面對DOM的產生和渲染說的比較細了,這樣說的主要原因是: 說明沒有一個類或者方法,可以得到內存中待渲染的DOM樹(有可能要,但是我不知道QAQ).
• 下面開始逐步實現虛擬DOM

---

createElement

• 我們想實現以下結構
  
• 語法如下:

let vertualDom = createElement('ul', { class: 'list'}, [createElement('ul', { class: 'list'}, ['a']),createElement('ul', { class: 'list'}, ['b']),createElement('ul', { class: 'list'}, ['c'])
])

• 我們想通過createElement之后,變為對象,結構如下:
  
• 很顯然,可以在創建虛擬節點時,返回一個VNode類,其中包含3個屬性(type、props、children)

class VNode {constructor(type, props, children) {this.type = type;this.props = props;this.children = children;}
}const createElement = (type, props, children) {return new VNode(type, props, children);
}

• 上面之后,就可以返回一個虛擬DOM對象了.
• 下面需要一個render方法,根據 虛擬DOM對象 來生成真實的DOM,并渲染.

---

render

• render方法接收一個虛擬dom對象,根據對象創建真實的DOM
• 1.首先我們根據傳入的對象,創建ul

const render = (vnode) {let el = document.createElement(vnode.type);return el;
}

• 打印一下:

let vertualDom = createElement('ul', { class: 'list' }, [createElement('ul', { class: 'list' }, ['a']),createElement('ul', { class: 'list' }, ['b']),createElement('ul', { class: 'list' }, ['c']),
])let el = render(vertualDom);console.log(el);

• 2.有了DOM之后,我們給dom設置屬性.由于屬性可能比較多,
• 因此我們使用for ... in 拿到鍵和值
• 使用setAttribute來設置屬性

const render = (vnode)  => {let el = document.createElement(vnode.type);let props = vnode.type;for(let key in props) {el.setAttribute(key, props[key]);}
}

• 檢測一下,改寫vertualDom

let vertualDom = createElement('ul', { class: 'list', style:'border:1px solid black' }, [createElement('ul', { class: 'list' }, ['a']),createElement('ul', { class: 'list' }, ['b']),createElement('ul', { class: 'list' }, ['c']),
])
let el = render(vertualDom);
document.body.appendChild(el);

• 現在有了節點和節點上面的屬性,下面需要渲染其子元素…
• 很自然的想到了遞歸.
• 遍歷其子元素,如果是VNode類型,就在調用render,否則認為其是一個文本節點.使用document.createTextNode創之

const render = (vnode) => {let el = document.createElement(vnode.type);let props = vnode.props;for (let key in props) {el.setAttribute(key, props[key]);}vnode.children.forEach(child => {child = child instanceof VNode ? render(child) : document.createTextNode(child);el.appendChild(child);})return el;
}