React虛擬DOM轉換為真實DOM

按照上面的猜想，那麼render方法的作用就是

render方法接收兩個引數，第二個引數沒什麼好說的， 固定寫法，第乙個引數有以下幾種情況：

類元件函式元件

文字、數字

class

extends
component
}

對於文字、數字，直接新增到根節點。

這樣就處理了各種元件型別，還有個問題就是這些元件的屬性怎麼處理。

屬性是classname，直接新增到標籤上

屬性是style，將樣式新增到標籤上

屬性是children，如果是文字、數字，直接插入節點，如果是dom元素，則迴圈遞迴處理

其他情況，當做普通屬性直接setattribute

在src下建立react-dom.js,**如下

function render

(element, parentnode)
let type, props;
type = element.type;
props = element.props;
if(type && type.isreactcomponent)
else
if(typeof type ==
='function'
) let domelement = document.
createelement
(type)
;// 建立乙個標籤
、之類的
for(let propname in props)
else
if(propname ==
='style'
)else
if(propname ==
='children'
)else
}else
} parentnode.
(domelement)
;// 將所有標籤處理完畢後插入跟節點
}export
default
;

虛擬DOM與真實DOM

先來個簡單的react例子 1.建立虛擬dom const vdom hello react h1 此處不要寫引號，因為不是字串 2.渲染虛擬dom到頁面 reactdom.render vdom document.getelementbyid test script head test div b...

虛擬DOM與真實DOM比較

首先，virtual dom並沒有完全實現dom，即虛擬dom和真正地dom是不一樣的，virtual dom最主要的還是保留了element之間的層次關係和一些基本屬性。因為真實dom實在是太複雜，乙個空的element都複雜得能讓你崩潰，並且幾乎所有內容我根本不關心好嗎。所以virtual do...

React 中的虛擬DOM

react 的重新渲染，效能是很高的。因為它引入了虛擬dom的概念。呃，來看一下，render 函式渲染頁面的幾種做法。前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換，但是也需要比對兩個dom。第三種是虛擬dom方式。虛擬dom 本質上就是 js...