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

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

• React不是一個完整的MVC框架，最多可以認(rèn)為是MVC中的V（View），甚至React并不非常認(rèn)可MVC開發(fā)模式；
• React的服務(wù)器端Render能力只能算是一個錦上添花的功能，并不是其核心出發(fā)點，事實上React官方站點幾乎沒有提及其在服務(wù)器端的應(yīng)用；
• 有人拿React和Web Component相提并論，但兩者并不是完全的競爭關(guān)系，你完全可以用React去開發(fā)一個真正的Web Component；
• React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工作。

1. React的原理

　　在Web開發(fā)中，我們總需要將變化的數(shù)據(jù)實時反應(yīng)到UI上，這時就需要對DOM進(jìn)行操作。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因（如何進(jìn)行高性能的復(fù)雜DOM操作通常是衡量一個前端開發(fā)人員技能的重要指標(biāo)）。React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現(xiàn)了一套DOM API。基于React進(jìn)行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時，React都會重新構(gòu)建整個DOM樹，然后React將當(dāng)前整個DOM樹和上一次的DOM樹進(jìn)行對比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進(jìn)行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)變化會被合并，例如你連續(xù)的先將節(jié)點內(nèi)容從A變成B，然后又從B變成A，React會認(rèn)為UI不發(fā)生任何變化，而如果通過手動控制，這種邏輯通常是極其復(fù)雜的。盡管每一次都需要構(gòu)造完整的虛擬DOM樹，但是因為虛擬DOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對實際DOM進(jìn)行操作的僅僅是Diff部分，因而能達(dá)到提高性能的目的。這樣，在保證性能的同時，開發(fā)者將不再需要關(guān)注某個數(shù)據(jù)的變化如何更新到一個或多個具體的DOM元素，而只需要關(guān)心在任意一個數(shù)據(jù)狀態(tài)下，整個界面是如何Render的。

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

　　借用Facebook介紹React的視頻中聊天應(yīng)用的例子，當(dāng)一條新的消息過來時，傳統(tǒng)開發(fā)的思路如上圖，你的開發(fā)過程需要知道哪條數(shù)據(jù)過來了，如何將新的DOM結(jié)點添加到當(dāng)前DOM樹上；而基于React的開發(fā)思路如下圖，你永遠(yuǎn)只需要關(guān)心數(shù)據(jù)整體，兩次數(shù)據(jù)之間的UI如何變化，則完全交給框架去做。

　　　　

　　

　　可以看到，使用React大大降低了邏輯復(fù)雜性，意味著開發(fā)難度降低，可能產(chǎn)生Bug的機會也更少。至于React如何做到將原來O(n^3)復(fù)雜度的Diff算法降低到O（n），大家可以參考這篇文章。

　　

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

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

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

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

　　

　　對于React而言，則完全是一個新的思路，開發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個組件都獨立封裝。

　　

　　在React中，你按照界面模塊自然劃分的方式來組織和編寫你的代碼，對于評論界面而言，整個UI是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。這樣最外層的界面的Render只需要如下代碼：

　　

　　通過這種方式，每個組件的UI和邏輯都定義在組件內(nèi)部，和外部完全通過API來交互，通過組合的方式來實現(xiàn)復(fù)雜的功能。React認(rèn)為一個組件應(yīng)該具有如下特征：

　　（1）可組合（Composeable）：一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。如果一個組件內(nèi)部創(chuàng)建了另一個組件，那么說父組件擁有（own）它創(chuàng)建的子　　組件，通過這個特性，一個復(fù)雜的UI可以拆分成多個簡單的UI組件；

　　（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；

　　（3）可維護(hù)（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)；

　　（4）可測試（Testable）：因為每個組件都是獨立的，那么對于各個組件分別測試顯然要比對于整個UI進(jìn)行測試容易的多。

　　

3. 一個React組件開發(fā)的例子：Tab選擇器

　　上面從總體上介紹了React帶來的全新的前端開發(fā)方法，以及其帶來的影響，并沒有介紹如何使用。為了讓大家對其有一個具體的印象，這里實際來開發(fā)一個簡單的組件：Tab選擇器。網(wǎng)店的產(chǎn)品頁面通常需要這樣的控件來選擇產(chǎn)品屬性，例如選擇衣服的顏色。這個控件接受一個數(shù)據(jù)源展示多個Tab供點擊，點擊后就選中了某個顏色，界面通常如下圖所示。

　　按傳統(tǒng)方式，我們可以用如下代碼來實現(xiàn)一個jQuery插件：

　　用React方式，代碼如下：

　　通過比較可以看到，jQuery插件方式，開發(fā)者首先需要考慮控件第一次Render出來時的DOM構(gòu)建；其次，需要知道如何切換UI上的選中狀態(tài)。

而React的方式，開發(fā)者僅僅需要考慮整體界面的DOM構(gòu)建，不再需要關(guān)心局部更新，每次在一個React的Component上調(diào)用setState方法，都會觸發(fā)render來重建整個界面。從開發(fā)思想的角度看，你可以認(rèn)為每次數(shù)據(jù)的更新都會做整體的完全刷新。邏輯簡單而直接。

如果我們再多考慮一步，控件的值不只在初始化和點擊時可以設(shè)置，而且還可以通過程序動態(tài)的去設(shè)置。那么對于jQuery的方案而言，我們需要額外的方法和入口去做對應(yīng)的UI更新。而對于React方式，則無需做任何改變，外部只需調(diào)用setState方法改變它的狀態(tài)即可。這就是簡化UI邏輯帶來的好處。

完整的代碼和演示已上傳在Github上：?https://github.com/supnate/react-tab-selector?，大家可以實際試用一下。

4. 結(jié)論

　　如上所述，React是一個全新思路的前端UI框架，它完全接管了UI開發(fā)中最為復(fù)雜的局部更新部分，擅長在在復(fù)雜場景下保證高性能；同時，它引入了基于組件的開發(fā)思想，從另一個角度來重新審視UI的構(gòu)成。通過這種方法，不僅能夠提高開發(fā)效率，而且可以讓代碼更容易理解，維護(hù)和測試。Facebook以這樣一種方式將沉淀多年的前端開發(fā)經(jīng)驗和技術(shù)的積累完全開源出來，值得所有前端開發(fā)者去借鑒和學(xué)習(xí)。并且React在發(fā)布一年的時間里就獲得了極大的關(guān)注，Github上擁有超過1萬的Star，相信其對前端開發(fā)的方向，甚至Web Component的標(biāo)準(zhǔn)，都將產(chǎn)生一定的影響。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaogo/p/4447131.html

總結(jié)

以上是生活随笔為你收集整理的[转]颠覆式前端UI开发框架：React的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。