React高性能的體現(xiàn)：虛擬DOM

React高性能的原理：

在Web開(kāi)發(fā)中我們總需要將變化的數(shù)據(jù)實(shí)時(shí)反應(yīng)到UI上，這時(shí)就需要對(duì)DOM進(jìn)行操作。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因（如何進(jìn)行高性能的復(fù)雜DOM操作通常是衡量一個(gè)前端開(kāi)發(fā)人員技能的重要指標(biāo)）。

React為此引入了虛擬DOM（Virtual DOM）的機(jī)制：在瀏覽器端用Javascript實(shí)現(xiàn)了一套DOM API。基于React進(jìn)行開(kāi)發(fā)時(shí)所有的DOM構(gòu)造都是通過(guò)虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時(shí)，React都會(huì)重新構(gòu)建整個(gè)DOM樹(shù)，然后React將當(dāng)前整個(gè)DOM樹(shù)和上一次的DOM樹(shù)進(jìn)行對(duì)比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個(gè)事件循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)變化會(huì)被合并，例如你連續(xù)的先將節(jié)點(diǎn)內(nèi)容從A-B,B-A，React會(huì)認(rèn)為A變成B，然后又從B變成A UI不發(fā)生任何變化，而如果通過(guò)手動(dòng)控制，這種邏輯通常是極其復(fù)雜的。

盡管每一次都需要構(gòu)造完整的虛擬DOM樹(shù)，但是因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)，性能是極高的，部而對(duì)實(shí)際DOM進(jìn)行操作的僅僅是Diff分，因而能達(dá)到提高性能的目的。這樣，在保證性能的同時(shí)，開(kāi)發(fā)者將不再需要關(guān)注某個(gè)數(shù)據(jù)的變化如何更新到一個(gè)或多個(gè)具體的DOM元素，而只需要關(guān)心在任意一個(gè)數(shù)據(jù)狀態(tài)下，整個(gè)界面是如何Render的。數(shù)據(jù)驅(qū)動(dòng)，聲明式