基于 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)另類的途徑，實(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?；?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)為 UI 不發(fā)生任何變化，而如果通過(guò)手動(dòng)控制，這種邏輯通常是極其復(fù)雜的。盡管每一次都需要構(gòu)造完整的虛擬 DOM 樹(shù)，但是因?yàn)樘摂M DOM 是內(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 框架要完成的事情。

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

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

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ā)者將三者定義成不同的類，實(shí)現(xiàn)了表現(xiàn)，數(shù)據(jù)，控制的分離。開(kāi)發(fā)者更多的是從技術(shù)的角度來(lái)對(duì) UI 進(jìn)行拆分，實(shí)現(xiàn)松耦合。

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

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

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

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

（2）可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè) UI 場(chǎng)景；

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

（4）可測(cè)試（Testable）：因?yàn)槊總€(gè)組件都是獨(dú)立的，那么對(duì)于各個(gè)組件分別測(cè)試顯然要比對(duì)于整個(gè) UI 進(jìn)行測(cè)試容易的多。

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

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

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

用 React 方式，代碼如下：

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

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

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

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

4. 結(jié)論

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