react的虛擬DOM轉換成DOM過程
1：babel的支援
我們知道HTML5文字中，我們是無法使用jsx的，例如，下面的定義就會出錯：
let vdom = (<div id="box">
<div>hello ,World!</div>
<span>你好嗎</span>
</div>
)
babel也提供了遠端cdn支援，所以我們只需要在頭部引用
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 就行了。
2:vdom轉換過程
當引入這個js檔案後，你會出現下面的一行出錯。
於是，我們的程式碼成了下面這個樣子
/** @jsx hyperScript **/
let vdom = (<div id="box">
<div>hello ,World!</div>
<span>你好嗎</span>
</div>
)
function hyperScript(nodeName , attributes , ...args){
}//這個方法用來解析jsx
我們書寫這個方法。在jsx中，我們認為每一個虛擬DOM其實就是一個json檔案。例如<div id="liuyang"></div>，就會等價於
{ nodeName :"div" , attrbutes : { id : "box"} , children : [] }。下面我們的hyperScript就會長這樣
function hyperScript(nodeName , attributes , ...args){
//返回虛擬DOM, 虛擬DOM結構，用[].concat(...args) 連線所有子節點，返回構建完成的JSON。
let children = args.length ? [].concat(...args) : [];return {nodeName,attributes,children }
}
書寫玩這個方法後，打印出vdom的結構
console.log( vdom )
console.log( JSON.stringify( vdom , null , 2) )
是不是發現vdom解析後就是一個json資料。
剩下的就是編寫一個render方法了。render接受一個vdom，返回一個真實的DOM。
function render( vnode ){
//如果是字元，直接建立文字返回
if(vnode.split){
return document.createTextNode( vnode )
}
//node是一個真實DOM
let node = document.createElement( vnode.nodeName );
//獲取屬性
let attrs = vnode.attrbutes || {} ;
//給這個node節點遍歷加上屬性
Object.keys( attrs ).forEach( item => node.setAttribute( item , attrs[item] ) );
//如果有子元素，遞迴處理子元素並且給屬性賦值，沒有就結束
( vnode.children || [] ).forEach( item => node.appendChild( render(item) ) );
//返回node
return node;
}
這時，我們定義一個let dom = render( vdom ); console.log( dom )
打印出dom，得到解析完成的真實DOM節點了。是不是發現Vdom也不是那麼神奇。
最後，貼上完整html程式碼， 懶人直接執行就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script type="text/babel">
/** @jsx hyperScript **/
let vdom = (<div id="liuyang">
<div>hello ,World!</div>
<span>你好嗎</span>
</div>
)
function hyperScript(nodeName , attributes , ...args){
//返回虛擬DOM, 虛擬DOM結構？
let children = args.length ? [].concat(...args) : [];
return {nodeName,attributes,children }
}
console.log( JSON.stringify( vdom , null , 2) )
console.log( vdom )
//虛擬DOM對映成 DOM節點
function render( vnode ){
//如果是文字，直接返回
if(vnode.split){
return document.createTextNode( vnode )
}
//是一個虛擬DOM
let node = document.createElement( vnode.nodeName );
//get屬性
let attrs = vnode.attrbutes || {} ;
//給節點加上屬性
Object.keys( attrs ).forEach( item => node.setAttribute( item , attrs[item] ) );
//遞迴處理子元素，children
( vnode.children || [] ).forEach( item => node.appendChild( render(item) ) );
//返回node
return node;
}
let dom =render( vdom );
console.log( dom )
</script>
</head>
<body>
</body>
</html>
相關推薦
react的虛擬DOM轉換成DOM過程
1：babel的支援 我們知道HTML5文字中，我們是無法使用jsx的，例如，下面的定義就會出錯： let vdom = (<div id="box"><div>hello ,World!</div><span>你好嗎
Hive系列之HSQL轉換成MapReduce過程
hive的庫、表等資料實際是hdfs系統中的目錄和檔案，讓開發者可以通過sql語句， 像操作關係資料庫一樣操作檔案內容， 比如執行查詢，統計，插入等操作。一直很好奇hive是如何做到這些的。hive的整體架構圖如下所示， compiler部分負責把HiveSQL轉換成MapReduce任務。基本轉換步驟hiv
react時間戳轉換成需要格式
後端返回前端日期時間，一般給你的都是時間戳，然後前端展示需要轉換成需要格式。以下是我開發中常遇到需要轉換成的格式，看程式碼。class DateApi { /** * 將輸入的毫秒字串or毫秒數轉換成指定的字串格式 * @param {string
ESXI虛擬機器轉換成物理機[V2P]
一直以來我們在做虛擬化的時候都會做一件事情就是P2V，而很少人做V2P，其實在實際情況中我們可能會遇到這種情況，至於原因可想而知，無非是效能得不到滿足、無法在虛擬化平臺上正常執行， 雖然說這種情況很少，但是還是會存在的，所以這裡我們說一下關於V2P的那些事情，V2P其
react虛擬dom與diff算法
變量 極速 原理圖 計算 oss 插入慢 ces 隊列 pre react擁有極速渲染的特點，這個特點依靠的就是react的虛擬dom和diff算法 對比兩個圖就可以發現標準dom機制下，用戶在應用上的操作是直接對真實dom進行操作的，在react中我們操作 的是虛擬
淺談React虛擬DOM Diff演算法
為什麼要使用虛擬DOM 因為瀏覽器的DOM渲染是非常消耗效能的，很低效，我們使用虛擬DOM是為了提高DOM的渲染效能； 什麼是虛擬DOM 虛擬DOM就是把真實的DOM樹通過createElement轉換成js中的一個物件樹，在內 存中作比較 在虛擬
react 虛擬dom 淺析
react 虛擬dom 淺析 虛擬dom 的概念 隨著 react vue 等框架的普及 在前端圈一度成為一個熱議的話題 爭論點在於 虛擬dom 真的可以提高 操作dom的效能麼 與傳統的jq 相比 效能到底有多大提升 於是帶著這兩個問題 我研究了下 這塊的知識（ 以下純屬個
淺談React虛擬DOM
為什麼要使用虛擬DOM 因為瀏覽器的DOM渲染是非常消耗效能的，很低效，我們使用虛擬DOM是為了提高DOM的渲染效能； 什麼是虛擬DOM 虛擬DOM就是把真實的DOM樹通過createElement轉換成js中的一個物件樹，在內 存中作比較 在虛擬DOM中是如何渲染頁面的
將網頁的dom節點轉換成img並下載下來
這裡需要用到一個依賴html2canvas，使用npm安裝即可： npm install html2canvas --save-dev 然後在頁面中引入即可使用。 利用了a標籤的下載功能 dom儲存為img的程式碼如下 function saveAs
React虛擬DOM的好處
關於React提供的虛擬DOM的好處有一些困惑和誤解需要闡明。 我們總是或多或少的聽說過直接操作DOM是低效和緩慢的。然而，我們幾乎沒有可用的資料來支援這個觀點。關於React虛擬DOM的令人愉悅的地方在於web開發過程中，它採用了更加高效的方式來更新view層。 我們把使用React的其他好處姑且放到一
什麼是漸進式框架？React虛擬Dom理解？diff演算法？
《我的職業是前端工程師【四】：如何選擇合適的前端框架，告別選擇恐懼症》提到一句：“Vue.js 是一套構建使用者介面的漸進式框架，專注於MVVM 模型的 ViewModel 層。”那麼，什麼是構建使用者介面的漸進式框架？看了知乎《Vue2.0 中，“漸進式框架”和“自底向上增
React虛擬DOM Diff演算法解析
React中最神奇的部分莫過於虛擬DOM，以及其高效的Diff演算法。這讓我們可以無需擔心效能問題而”毫無顧忌”的隨時“重新整理”整個頁面，由虛擬DOM來確保只對介面上真正變化的部分進行實際的DOM操作。React在這一部分已經做到足夠透明，在實際開發中我們基本無需關心虛
react虛擬事件（合成事件）與dom原生事件的混用
react合成事件如果DOM上綁定了過多的事件處理函式，整個頁面響應以及記憶體佔用可能都會受到影響。React為了避免這類DOM事件濫用，同時遮蔽底層不同瀏覽器之間的事件系統差異，實現了一箇中間層——SyntheticEvent。原理React中，如果需要繫結事件，我們常常在
React虛擬DOM淺析
ring 復用 setting 新的 cti 構建 mutable ldd tag 在Web開發中，需要將數據的變化實時反映到UI上，這時就需要對DOM進行操作，但是復雜或頻繁的DOM操作通常是性能瓶頸產生的原因，為此，React引入了虛擬DOM（Virtual DO
深入理解React虛擬DOM
統計 ldr 即使 src 控制 執行 對比 問題 如果 一、什麽是虛擬DOM 虛擬DOM可以看做一棵模擬了DOM樹的JavaScript對象樹。比如： 1 var element = { 2 element: ‘ul‘, 3 prop
react入門-----（jsx語法，在react中獲取真實的dom節點）
rip opp blog alice code text fault 通過 cnblogs 1、jsx語法 1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2 <!-- HTML 語言直接寫在 JavaS
c語言代碼轉換成lr代碼的過程
隨機 技術分享 轉換成 alt images cti action code sca Action() { //腳本實現的功能：在字符串中隨機插入一個新字符串 char s1[20]="AAAAAAA"; char s2[20]="@";
nova創建虛擬機源碼分析系列之七 傳入參數轉換成內部id
接口 函數 device 博文 nat build 消息 通過 rop 上一篇博文將nova創建虛機的流程推進到了/compute/api.py中的create()函數，接下來就繼續分析。 在分析之前簡單介紹nova組件源碼的架構。以conductor組件為例： 每個組件
[Java] Jar2Exe,jar2工具將jar包轉換成exe可執行檔案的詳細過程
[Java] Jar2Exe,jar2工具將jar包轉換成exe可執行檔案的詳細過程 軟體下載地址 連結: https://pan.baidu.com/s/1Ei39JYGpb7wyS9UkMl1GTQ 提取碼: yvkv 一、首先將程式匯出為jar包 1、在MyEcli
在react中 實現 base64的圖片轉換成formdata格式並實現上傳功能
如果不想要服務端實現處理base64格式的圖片的轉換，那麼在瀏覽器端來實現，部分屬於虛擬碼，僅作為開發參考，請勿直接拷貝使用