顛覆式前端UI開發框架：React

基於HTML的前端界面開發正變得愈來愈複雜，其本質問題基本均可以歸結於如何未來自於服務器端或者用戶輸入的動態數據高效的反映到複雜的用戶界面上。而來自Facebook的React框架正是徹底面向此問題的一個解決方案，按官網描述，其出發點爲：用於開發數據不斷變化的大型應用程序（Building large applications with data that changes over time）。相比傳統型的前端開發，React開闢了一個至關另類的途徑，實現了前端界面的高效率高性能開發。

首先，對於React，有一些認識誤區，這裏先總結一下：

• React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式；
• React的服務器端Render能力只能算是一個錦上添花的功能，並非其核心出發點，事實上React官方站點幾乎沒有說起其在服務器端的應用；
• 有人拿React和Web Component相提並論，但二者並非徹底的競爭關係，你徹底能夠用React去開發一個真正的Web Component；
• React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工做。

1. React的原理

在Web開發中，咱們總須要將變化的數據實時反應到UI上，這時就須要對DOM進行操做。而複雜或頻繁的DOM操做一般是性能瓶頸產生的緣由（如何進行高性能的複雜DOM操做一般是衡量一個前端開發人員技能的重要指標）。React爲此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，而後又從B變成A，React會認爲UI不發生任何變化，而若是經過手動控制，這種邏輯一般是極其複雜的。儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只須要關心在任意一個數據狀態下，整個界面是如何Render的。

若是你像在90年代那樣寫過服務器端Render的純Web頁面那麼應該知道，服務器端所要作的就是根據數據Render出HTML送到瀏覽器端。若是這時由於用戶的一個點擊須要改變某個狀態文字，那麼也是經過刷新整個頁面來完成的。服務器端並不須要知道是哪一小段HTML發生了變化，而只須要根據數據刷新整個頁面。換句話說，任何UI的變化都是經過總體刷新來完成的。而React將這種開發模式以高性能的方式帶到了前端，每作一點界面的更新，你均可以認爲刷新了整個頁面。至於如何進行局部更新以保證性能，則是React框架要完成的事情。

借用Facebook介紹React的視頻中聊天應用的例子，當一條新的消息過來時，傳統開發的思路如上圖，你的開發過程須要知道哪條數據過來了，如何將新的DOM結點添加到當前DOM樹上；而基於React的開發思路以下圖，你永遠只須要關心數據總體，兩次數據之間的UI如何變化，則徹底交給框架去作。

能夠看到，使用React大大下降了邏輯複雜性，意味着開發難度下降，可能產生Bug的機會也更少。至於React如何作到將原來O(n^3)複雜度的Diff算法下降到O（n），你們能夠參考這篇文章。

2. 組件化的開發思路

虛擬DOM不只帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具備獨立功能的UI部件。React推薦以組件的方式去從新思考UI構成，將UI上每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件，最終完成總體UI的構建。例如，Facebook的instagram.com整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套的大量其它組件，你們有興趣能夠看下它背後的代碼。

若是說MVC的思想讓你作到視圖-數據-控制器的分離，那麼組件化的思考方式則是帶來了UI功能模塊之間的分離。咱們經過一個典型的Blog評論界面來看MVC和組件化開發思路的區別。

對於MVC開發模式來講，開發者將三者定義成不一樣的類，實現了表現，數據，控制的分離。開發者更多的是從技術的角度來對UI進行拆分，實現鬆耦合。

對於React而言，則徹底是一個新的思路，開發者從功能的角度出發，將UI分紅不一樣的組件，每一個組件都獨立封裝。

在React中，你按照界面模塊天然劃分的方式來組織和編寫你的代碼，對於評論界面而言，整個UI是一個經過小組件構成的大組件，每一個組件只關心本身部分的邏輯，彼此獨立。這樣最外層的界面的Render只須要以下代碼：

經過這種方式，每一個組件的UI和邏輯都定義在組件內部，和外部徹底經過API來交互，經過組合的方式來實現複雜的功能。React認爲一個組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有（own）它建立的子組件，經過這個特性，一個複雜的UI能夠拆分紅多個簡單的UI組件；

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

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

（4）可測試（Testable）：由於每一個組件都是獨立的，那麼對於各個組件分別測試顯然要比對於整個UI進行測試容易的多。

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

上面從整體上介紹了React帶來的全新的前端開發方法，以及其帶來的影響，並無介紹如何使用。爲了讓你們對其有一個具體的印象，這裏實際來開發一個簡單的組件：Tab選擇器。網店的產品頁面一般須要這樣的控件來選擇產品屬性，例如選擇衣服的顏色。這個控件接受一個數據源展現多個Tab供點擊，點擊後就選中了某個顏色，界面一般以下圖所示。

按傳統方式，咱們能夠用以下代碼來實現一個jQuery插件：

用React方式，代碼以下：

經過比較能夠看到，jQuery插件方式，開發者首先須要考慮控件第一次Render出來時的DOM構建；其次，須要知道如何切換UI上的選中狀態。

而React的方式，開發者僅僅須要考慮總體界面的DOM構建，再也不須要關心局部更新，每次在一個React的Component上調用setState方法，都會觸發render來重建整個界面。從開發思想的角度看，你能夠認爲每次數據的更新都會作總體的徹底刷新。邏輯簡單而直接。

若是咱們再多考慮一步，控件的值不僅在初始化和點擊時能夠設置，並且還能夠經過程序動態的去設置。那麼對於jQuery的方案而言，咱們須要額外的方法和入口去作對應的UI更新。而對於React方式，則無需作任何改變，外部只需調用setState方法改變它的狀態便可。這就是簡化UI邏輯帶來的好處。

完整的代碼和演示已上傳在Github上： https://github.com/supnate/react-tab-selector ，你們能夠實際試用一下。

4. 結論

如上所述，React是一個全新思路的前端UI框架，它徹底接管了UI開發中最爲複雜的局部更新部分，擅長在在複雜場景下保證高性能；同時，它引入了基於組件的開發思想，從另外一個角度來從新審視UI的構成。經過這種方法，不只可以提升開發效率，並且可讓代碼更容易理解，維護和測試。Facebook以這樣一種方式將沉澱多年的前端開發經驗和技術的積累徹底開源出來，值得全部前端開發者去借鑑和學習。而且React在發佈一年的時間裏就得到了極大的關注，Github上擁有超過1萬的Star，相信其對前端開發的方向，甚至Web Component的標準，都將產生必定的影響。