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

PumpkinDylan 發布于2019-08-22 16:40 / 2734人閱讀

摘要：可實際上并不是創造的，將這個概念拿過來以后融會貫通慢慢地成為目前前端最炙手可熱的框架之一。則是將再抽象一層生成的簡化版對象，這個對象也擁有上的一些屬性，比如等，但它是完全脫離于瀏覽器而存在的。所以今天我要手把手教大家怎么從零開始實現。

假如你的項目使用了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解決這個問題的呢？

首先，在React當我們要去修改數據的時候，我們會調用React提供的setState方法來修改數據；

React根據新的數據生成一個新的VDOM，因為VDOM本質上只是一個普通的js對象，所以這個過程是很快的；

然后React拿著新生成VDOM和之前的VDOM進行對比（diff算法），找出不同的地方(新增，刪除，修改)，生成一個個的補丁（patches）;

最后React把這些補丁一次性打到DOM上，完成視圖的修改。

原理其實還是很直觀的，但React到底是怎么用代碼實現的呢？其中最關鍵的一步是React是怎么diff的？如果搞清楚了內部的實現原理，對于我們使用React來寫出性能更高的代碼至關重要。所以今天我要手把手教大家怎么從零開始實現VDOM。

我們的設計藍圖

我們將采用跟React類似的方式

使用JSX來編寫組件；

用Babel將JSX轉化為純js(類似hyperscript)；

將hyperscript轉化成我們的VDOM；

將VDOM渲染到頁面，形成真實的DOM；

手動更新數據并手動觸發更新視圖操作(這部分是react做的，跟VDOM的實現無關，所以我們手動模擬一下)；

重復步驟二和步驟三，得到新的VDOM；

diff新VDOM和舊VDOM，得到需要修改真實DOM的patches；

把patches一次性打到DOM上，只更新DOM上需要更改的地方。

下面我們開始正式進入寫代碼環節，建議大家打開編輯器跟著我一步一步的敲代碼。這樣手把手教你敲代碼的的博主你去哪里找？還不抓住這個千載難逢的機會？???

項目結構

index.html

index.js(所有的邏輯都寫在這個文件里)

.babelrc（babel的配置頁）

package.json

compiled.js (這個文件是babel打包自己生成的，不需要自己寫)

大家可以新建一個目錄，然后新建1-4這四個文件

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

云服務器 GPU云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城 virtual-dom 從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94560.html

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

摘要：上集回顧從零開始手把手教你實現一個一上一集我們介紹了什么是，為什么要用，以及我們要怎樣來實現一個。完成后，在命令行中輸入安裝下依賴。最后返回這個目標節點。明天，我們迎接挑戰，開始處理數據變動引起的重新渲染，我們要如何新舊，生成補丁，修改。上集回顧從零開始手把手教你實現一個Virtual DOM（一）上一集我們介紹了什么是VDOM，為什么要用VDOM，以及我們要怎樣來實現一個VDOM...

dendoink 2019-08-22 16:43 評論0 收藏0
【React進階系列】從零開始手把手教你實現一個Virtual DOM（三）

摘要：函數依次做了這幾件事調用函數，對比新舊兩個，根據兩者的不同得到需要修改的補丁將補丁到真實上當計數器小于等于的時候，將加，再繼續下一次當計數器大于的時候，結束下面我們來實現函數和函數。上集回顧【React進階系列】從零開始手把手教你實現一個Virtual DOM（二）上集我們實現了首次渲染從JSX=>Hyperscript=>VDOM=>DOM的過程，今天我們來看一下當數據變動的時...

qqlcbb 2019-08-22 16:49 評論0 收藏0
Vue.js最佳實踐（五招讓你成為Vue.js大師）

摘要：但如果你想更加高效地使用來開發，成為大師，那下面我要傳授的這五招你一定得認真學習一下了。雖然損失了一丟丟性能，但避免了無限的。所以我們需要設置，這些默認行為將會被去掉以上兩點的優化才能成功。陸續可能還會更新一些別的招數，敬請期待。本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我，有空就給你們寫。對大部分人來說，掌握Vue.j...

CocoaChina 2019-08-22 15:52 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0