【React進階系列】從零開始手把手教你實現一個Virtual DOM（一）

假如你的項目使用了React，你知道怎麼作性能優化嗎？
你知道爲何React讓你寫shouldComponentUpdate或者React.PureComponent嗎？
你知道爲何React讓你寫Immutable Data Structures嗎？
你知道爲何React讓你在渲染列表時，必定要給每一個子項加一個key嗎？
你知道爲何React讓你在條件渲染時，不寫if而寫&&操做符或三元操做符嗎？

一切的答案都在Virtual DOM上！
只要你跟着我完成了這個手寫Virtual DOM的系列，上面的全部問題你都將獲得解答，今後進入react高手的陣營！

---

如今當咱們談virtual DOM (VDOM)的時候，一般會將React捆綁在一塊兒談。可實際上VDOM並非React創造的，React將這個概念拿過來之後融會貫通慢慢地成爲目前前端最煊赫一時的框架之一。

什麼是VDOM？

首先咱們都知道什麼是DOM(Document Object Model)，簡單說就是將一個HTML文檔抽象表達爲樹結構。VDOM則是將DOM再抽象一層生成的簡化版js對象，這個對象也擁有DOM上的一些屬性，好比id, class等，但它是徹底脫離於瀏覽器而存在的。

爲何要用VDOM？

隨着前端技術的發展，如今的網頁應用變得愈來愈龐大，DOM樹也隨之變得複雜。當咱們要修改DOM的某個元素時，咱們須要先遍歷找個這個元素，而後才修改能修改。並且若是咱們大量地去修改DOM，每次DOM修改瀏覽器就得重繪（repaint）頁面，有的時候甚至還得重排(reflow)頁面，瀏覽器的重排重繪是很損耗性能的。

React是怎麼用VDOM解決這個問題的呢？

1. 首先，在React當咱們要去修改數據的時候，咱們會調用React提供的setState方法來修改數據；
2. React根據新的數據生成一個新的VDOM，由於VDOM本質上只是一個普通的js對象，因此這個過程是很快的；
3. 而後React拿着新生成VDOM和以前的VDOM進行對比（diff算法），找出不一樣的地方(新增，刪除，修改)，生成一個個的補丁（patches）;
4. 最後React把這些補丁一次性打到DOM上，完成視圖的修改。

原理其實仍是很直觀的，但React究竟是怎麼用代碼實現的呢？其中最關鍵的一步是React是怎麼diff的？若是搞清楚了內部的實現原理，對於咱們使用React來寫出性能更高的代碼相當重要。因此今天我要手把手教你們怎麼從零開始實現VDOM。

咱們的設計藍圖

咱們將採用跟React相似的方式

1. 使用JSX來編寫組件；
2. 用Babel將JSX轉化爲純js(相似hyperscript)；
3. 將hyperscript轉化成咱們的VDOM；
4. 將VDOM渲染到頁面，造成真實的DOM；
5. 手動更新數據並手動觸發更新視圖操做(這部分是react作的，跟VDOM的實現無關，因此咱們手動模擬一下)；
6. 重複步驟二和步驟三，獲得新的VDOM；
7. diff新VDOM和舊VDOM，獲得須要修改真實DOM的patches；
8. 把patches一次性打到DOM上，只更新DOM上須要更改的地方。

下面咱們開始正式進入寫代碼環節，建議你們打開編輯器跟着我一步一步的敲代碼。這樣手把手教你敲代碼的的博主你去哪裏找？還不抓住這個百年不遇的機會？???

項目結構

1. index.html
2. index.js(全部的邏輯都寫在這個文件裏)
3. .babelrc（babel的配置頁）
4. package.json
5. compiled.js (這個文件是babel打包本身生成的，不須要本身寫)

你們能夠新建一個目錄，而後新建1-4這四個文件

從零開始手把手教你實現一個Virtual DOM（二）