DOM
[嵌牛導(dǎo)讀]
上篇文章談到React的魅力-“組件化UI”馏段，如何將你的頁面運用組件化的思想進行劃分邑雅，繼而能夠保證
清晰的邏輯能夠清晰的展示數(shù)據(jù)
React的state將數(shù)據(jù)進行了雙向綁定，使得獲取服務(wù)器的數(shù)據(jù)之后頁面能夠立即更新寝贡，無延遲，用戶友好。那么堰酿，React是如何做到
數(shù)據(jù)更新的迅速反應(yīng), 數(shù)據(jù)無阻塞，無延遲地渲染到組件上
[嵌牛鼻子]
VirtualDOM | DOM | React | Diff算法
[嵌牛提問]
- VirtualDOM 和 DOM是什么關(guān)系张足？
- 組件如何更新触创，更新的是什么？
[嵌牛正文]
Tree Structure
i. VirtualDOM & DOM
-
DOM
DOM樹
- DOM, (Document Objecet Model), 文檔對象模型
- DOM定義了訪問HTML或是XML文檔的標(biāo)準为牍，是一種使程序動態(tài)的訪問哼绑，更新HTML文檔或XML文檔等的內(nèi)容，結(jié)構(gòu)以及樣式的平臺碉咆，操作接口
- DOM定義了文檔的對象和屬性抖韩，以及訪問它們的接口
我們所建立的HTML頁面正是由大量的DOM節(jié)點組成，如圖(DOM樹)所示疫铜，所有的DOM節(jié)點組成一顆DOM樹茂浮，節(jié)點之間存在不同的聯(lián)系，也正是這些聯(lián)系構(gòu)建出我們需要的邏輯壳咕，需要展示的頁面
- VirtualDOM
- VirtualDOM励稳，虛擬DOM對象，是React中的DOM對象
- React使用JSX編寫虛擬DOM對象囱井，經(jīng)過Babel編譯之后會生成真正的DOM. 然后會將真正的DOM插入(Render)到頁面
- VirtualDOM的好處是具有高可操作性驹尼，高可定義性，能夠非常方便的動態(tài)生成頁面內(nèi)容
整個頁面被看作一個Javascript對象庞呕，簡單來說新翎，對這個對象的操作就是對整個頁面的操作程帕，React將純DOM（真正的DOM）操作隔離開，自身采用JSX編寫“Javascriipt語法的HTML”地啰，這也正是React的優(yōu)勢所在
ii. Diff算法
組件在更新時愁拭，新數(shù)據(jù)到達需要重新渲染到頁面，若采用HTML DOM的節(jié)點更新亏吝，對于龐大的DOM樹岭埠，重新渲染頁面，重新構(gòu)造DOM節(jié)點蔚鸥，這是非常大的開銷
而Diff算法
- 將未更新的頁面生成一份虛擬DOM對象
- 新數(shù)據(jù)到達時惜论，先構(gòu)建新的虛擬DOM對象，然后比對新DOM和舊DOM的不同之處止喷，即發(fā)生數(shù)據(jù)改變的地方
- 然后只要更新數(shù)據(jù)改變的部分就可以達到更新整個頁面的效果馆类、
這使得我們在state改變后render整個頁面而不用擔(dān)心性能的問題，極大的簡化了UI開發(fā)的復(fù)雜度弹谁，提高的運行效率
END
參考文章及鏈接
