在網(wǎng)上學(xué)習(xí)了關(guān)于react的介紹，先認(rèn)識(shí)下react。

? ? ? ? 基于HTML的前端界面開(kāi)發(fā)正變得越來(lái)越復(fù)雜，其本質(zhì)問(wèn)題基本都可以歸結(jié)于如何將來(lái)自于服務(wù)器端或者用戶輸入的動(dòng)態(tài)數(shù)據(jù)高效的反映到復(fù)雜的用戶界面上。而來(lái)自Facebook的React框架正是完全面向此問(wèn)題的一個(gè)解決方案，按官網(wǎng)描述，其出發(fā)點(diǎn)為：用于開(kāi)發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序（Building large applications with data that changes over time）。相比傳統(tǒng)型的前端開(kāi)發(fā)，React開(kāi)辟了一個(gè)相當(dāng)另類(lèi)的途徑，實(shí)現(xiàn)了前端界面的高效率高性能開(kāi)發(fā)。

首先，對(duì)于React，有一些認(rèn)識(shí)誤區(qū)，這里先總結(jié)一下：

React不是一個(gè)完整的MVC框架，最多可以認(rèn)為是MVC中的V（View），甚至React并不非常認(rèn)可MVC開(kāi)發(fā)模式；

React的服務(wù)器端Render能力只能算是一個(gè)錦上添花的功能，并不是其核心出發(fā)點(diǎn)，事實(shí)上React官方站點(diǎn)幾乎沒(méi)有提及其在服務(wù)器端的應(yīng)用；

有人拿React和Web Component相提并論，但兩者并不是完全的競(jìng)爭(zhēng)關(guān)系，你完全可以用React去開(kāi)發(fā)一個(gè)真正的Web Component；

React不是一個(gè)新的模板語(yǔ)言，JSX只是一個(gè)表象，沒(méi)有JSX的React也能工作。

?1. 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?；赗eact進(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)為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的。

如果你像在90年代那樣寫(xiě)過(guò)服務(wù)器端Render的純Web頁(yè)面那么應(yīng)該知道，服務(wù)器端所要做的就是根據(jù)數(shù)據(jù)Render出HTML送到瀏覽器端。如果這時(shí)因?yàn)橛脩舻囊粋€(gè)點(diǎn)擊需要改變某個(gè)狀態(tài)文字，那么也是通過(guò)刷新整個(gè)頁(yè)面來(lái)完成的。服務(wù)器端并不需要知道是哪一小段HTML發(fā)生了變化，而只需要根據(jù)數(shù)據(jù)刷新整個(gè)頁(yè)面。換句話說(shuō)，任何UI的變化都是通過(guò)整體刷新來(lái)完成的。而React將這種開(kāi)發(fā)模式以高性能的方式帶到了前端，每做一點(diǎn)界面的更新，你都可以認(rèn)為刷新了整個(gè)頁(yè)面。至于如何進(jìn)行局部更新以保證性能，則是React框架要完成的事情。

2.組件化的開(kāi)發(fā)思路

虛擬DOM不僅帶來(lái)了簡(jiǎn)單的UI開(kāi)發(fā)邏輯，同時(shí)也帶來(lái)了組件化開(kāi)發(fā)的思想，所謂組件，即封裝起來(lái)的具有獨(dú)立功能的UI部件。React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件，然后將小的組件通過(guò)組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建。例如，F(xiàn)acebook的instagram.com整站都采用了React來(lái)開(kāi)發(fā)，整個(gè)頁(yè)面就是一個(gè)大的組件，其中包含了嵌套的大量其它組件，大家有興趣可以看下它背后的代碼。

如果說(shuō)MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離，那么組件化的思考方式則是帶來(lái)了UI功能模塊之間的分離。我們通過(guò)一個(gè)典型的Blog評(píng)論界面來(lái)看MVC和組件化開(kāi)發(fā)思路的區(qū)別。

對(duì)于MVC開(kāi)發(fā)模式來(lái)說(shuō)，開(kāi)發(fā)者將三者定義成不同的類(lèi)，實(shí)現(xiàn)了表現(xiàn)，數(shù)據(jù)，控制的分離。開(kāi)發(fā)者更多的是從技術(shù)的角度來(lái)對(duì)UI進(jìn)行拆分，實(shí)現(xiàn)松耦合。