2016-02-03 39 views
0

所有:React virtualDOM和真實DOM如何改變風格?

我非常新的React.js,聽到了許多關於陣營虛擬DOM,但我有點疑惑是它和實際DOM之間的主要區別時,處理這樣的簡單情況變化的風格一個元素:

說我想換一個div別人的距離,我可以使用jQuery爲:

$("div#test").css("margin-left","10px"); 

,我的理解有關瀏覽器如何做到真正的DOM是:

  1. 搜索DOM樹並找到該節點。
  2. 更新根據style屬性(我猜是CSSOM樹)
  3. 渲染視圖

所以我的問題是:

  1. 我的理解是否正確?
  2. 如果它基本正確,那麼虛擬DOM如何提高性能?難道它只是使用差異算法來比較其輕量級版本DOM樹中需要更新的內容,並發現剩餘空間需要更新,並將像jquery中一樣的東西應用於真正的DOM?

OR

  • ,如果它是不正確的,任何人都可以給一個小細節是什麼沉重的工作並瀏覽器做哪些陣營虛擬DOM跳到增強現實DOM表現?
  • 我找到虛擬DOM一提post 3具體操作:

    是什麼使得它的真快是:

    1. 高效DIFF算法。
    2. 批處理DOM讀/寫操作。
    3. 僅高效更新子樹。

    所以與此相比,這是否意味着在現實DOM:

    1. 不太有效的差異算法或不存在的算法(只更新 一切)?
    2. 單讀/寫操作就像我給3個樣式更新甚至相同的DOM元素,瀏覽器會在DOM樹下查找該元素3次並更新樣式?從根
    3. 更新整個DOM(基本上就像轉儲當前的樹和重建整個DOM樹再次不管需要更新什麼樹的一部分,並找到節點和更新)

    感謝

    回答

    0

    首先,你對「真正的」DOM操作是如何工作是正確的。

    React保留了我們稱之爲虛擬DOM的「真實」DOM的內存中表示。而不是遍歷「真正的」DOM來修改節點,這個虛擬DOM可以很容易和快速地訪問,因此可以更快地傳遞更新。另外,想象一下DOM中的很多變化,遍歷「真實」DOM需要很長時間。這是虛擬DOM真正擅長的一種情況。