【編者按】Kumar Sanket為T(mén)optal公司的全棧Web開(kāi)發(fā)者/工程師，他在一篇文章《Why I Ditched Angular for React》中對Angular和React進(jìn)行了對比，他表示Angular在快速開(kāi)發(fā)大型Web項目上很受推崇，但其也存在的種種缺陷，如過(guò)于依賴(lài)DOM操作，雙向數據綁定帶來(lái)性能問(wèn)題等。而React作為由Facebook和Instagramin領(lǐng)導的新開(kāi)源項目，為JavaScript應用開(kāi)發(fā)者提供了新的開(kāi)發(fā)方式，同時(shí)具有速度快、跨瀏覽器兼容、模塊化等優(yōu)點(diǎn)，也是這些優(yōu)點(diǎn)，讓Kumar Sanket選擇了React。下面為該文章的譯文。
幾年前，我的代碼因充滿(mǎn)了jQuery選擇器和回調函數而十分凌亂，后來(lái)AngularJS的出現很好地解決了這個(gè)問(wèn)題。
使用AngularJS開(kāi)發(fā)的項目擁有極好的可維護性，AngularJS擁有一系列簡(jiǎn)單易用的功能，有利于快速開(kāi)發(fā)大型的Web項目。
初識時(shí)，AngularJs的雙向數據綁定和所有的數據源都放在Model中的設計理念讓我驚嘆，在實(shí)際的開(kāi)發(fā)中，有效地減少了應用程序中的數據冗余。
隨著(zhù)應用頻率越來(lái)越多， AngularJs的一些缺陷也漸漸體現，在使用過(guò)程中的不如意讓我決定尋找一個(gè)它的替代品。
以下就是我對Angular的一些不滿(mǎn)。
基于DOM的程序執行。在A(yíng)ngular的執行過(guò)程中過(guò)于依賴(lài)DOM操作。在A(yíng)ngular應用的執行時(shí)，會(huì )首先掃描所有的DOM，再通過(guò)指令進(jìn)行編譯，這讓不利于開(kāi)發(fā)者進(jìn)行調試也很難判斷程序執行順序。
雙向數據綁定是一把雙刃劍。隨著(zhù)組件增加，項目越來(lái)越復雜，雙向數據綁定帶來(lái)性能問(wèn)題。
雙向數據綁定是如何影響性能的？在JavaScript（ES5）中，并沒(méi)有實(shí)現當變量或對象改變時(shí)發(fā)出通知的功能，Angular的實(shí)現方法被叫做“Dirty-checking（臟檢查機制）”，通過(guò)跟蹤數據的改變再動(dòng)態(tài)更新用戶(hù)界面（UI）。
在A(yíng)ngular的作用域中任何操作的執行都會(huì )引發(fā)Dirty-checking，隨著(zhù)綁定數量的增加性能就會(huì )越低。
雙向數據綁定的另一個(gè)問(wèn)題是，如果頁(yè)面上有許多擁有動(dòng)態(tài)數據的組件，這意味著(zhù)也會(huì )有很多的數據來(lái)源，如果管理不好會(huì )讓人感覺(jué)混亂不堪。但公平地說(shuō)，這是開(kāi)發(fā)人員的方式方法問(wèn)題而不是Angular本身的缺陷。
Angular自成一體。Angular的任何操作會(huì )引起digest cycle對注冊過(guò)的監聽(tīng)器的遍歷，以實(shí)現組件動(dòng)態(tài)地同步數據。這會(huì )和其它的依賴(lài)產(chǎn)生兼容性問(wèn)題。
如果你使用的其它JavaScript庫也需要改變數據就必須用Angular的$apply函數去封裝。
或者如果它是一個(gè)工具庫，你就需要把它轉換成一個(gè)服務(wù)。似乎其它JavaScript庫都必須經(jīng)過(guò)改動(dòng)才能和Angular進(jìn)行交互操作。
依賴(lài)注入。JavaScript目前沒(méi)有自己的包管理器和依賴(lài)解析器，AMD、UMD和CommonJs很好的解決了這個(gè)問(wèn)題。不幸的是Angular并沒(méi)有很好地利用這些規范，Angular甚至實(shí)現了一個(gè)自己的依賴(lài)注入(DI)。但是公平地說(shuō)Angular使用RequireJS依賴(lài)項注入的非官方實(shí)現已經(jīng)有了。
學(xué)習進(jìn)階難。使用Angular需要學(xué)習大量的概念，包括但不限于：
用好Angular是非常難的，不是一朝一夕的事情。
以上的原因導致我改用React。
React又哪里牛了？
React是一個(gè)由Facebook和Instagramin領(lǐng)導的新開(kāi)源項目，用于構建用戶(hù)界面，為JavaScript應用開(kāi)發(fā)者提供了新的開(kāi)發(fā)方式。
事先聲明：React并不是AngularJs那樣的一個(gè)應用程序開(kāi)發(fā)框架。把他們作為同一個(gè)類(lèi)型來(lái)比較是不公平的。
2013年五月，當JSConf EU大會(huì )上被推出時(shí)，它“單向數據流”和“虛擬DOM”等概念把觀(guān)眾震撼了。
React是用于構建用戶(hù)界面的。引用官方主頁(yè)上的說(shuō)法：“對開(kāi)發(fā)者來(lái)說(shuō)，React就是MVC中的V”。你可以自由地寫(xiě)獨立的組件，在這一點(diǎn)上或多或少優(yōu)于A(yíng)ngular的指令集。
React省思了目前Web開(kāi)發(fā)中遇到的一些問(wèn)題并作出了最佳的實(shí)踐。
比如，它鼓勵的單向數據流，并堅信組件是被數據驅動(dòng)的狀態(tài)機。
然而大部分其它類(lèi)似的框架都是直接操作DOM，React并不喜歡這種方式且盡量避免這種方式。
React恰如其分地提供了定義一個(gè)UI組件所需的最基本的API。它遵循UNIX的信條：做一件事，做到極致。
想知道更詳細的關(guān)于A(yíng)ngular和React的比較，可以閱讀Pete Hunt（Facebook/Instagram職員）寫(xiě)的Angular和React的比較來(lái)獲取更多細節。
為什么我開(kāi)始使用React？
以下是我喜歡React的一些地方。
React速度很快
與其它框架相比，React采取了一種特立獨行的操作DOM的方式。
它并不直接對DOM進(jìn)行操作。
它引入了一個(gè)叫做虛擬DOM的概念，安插在JavaScript邏輯和實(shí)際的DOM之間。
這一概念提高了Web性能。在UI渲染過(guò)程中，React通過(guò)在虛擬DOM中的微操作來(lái)實(shí)對現實(shí)際DOM的局部更新。
跨瀏覽器兼容
虛擬DOM幫助我們解決了跨瀏覽器問(wèn)題，它為我們提供了標準化的API，甚至在IE8中都是沒(méi)問(wèn)題的。
模塊化
為你程序編寫(xiě)獨立的模塊化UI組件，這樣當某個(gè)或某些組件出現問(wèn)題是，可以方便地進(jìn)行隔離。
每個(gè)組件都可以進(jìn)行獨立的開(kāi)發(fā)和測試，并且它們可以引入其它組件。這等同于提高了代碼的可維護性。
單向數據流讓事情一目了然
Flux是一個(gè)用于在JavaScript應用中創(chuàng )建單向數據層的架構，它隨著(zhù)React視圖庫的開(kāi)發(fā)而被Facebook概念化。它只是一個(gè)概念，而非特定工具的實(shí)現。它可以被其它框架吸納。例如，Alex Rattray有一個(gè)很好的Flux實(shí)例，在React中使用了Backbone的集合和模型。
純粹的JavaScript
現代Web應用程序與傳統的Web應用有著(zhù)不同的工作方式。
例如，視圖層的更新需要通過(guò)用戶(hù)交互而不需要請求服務(wù)器。因此視圖和控制器非常依賴(lài)彼此。
許多框架使用Handlebars或Mustache等模板引擎來(lái)處理視圖層。但React相信視圖和控制器應該相互依存在一起而不是使用第三方模板引擎，而且，最重要的是，它是純粹的JavaScript程序。
同構的JavaScript
單頁(yè)面JS應用程序的最大缺陷在于對搜索引擎的索引有很大限制。React對此有了解決方案。
React可以在服務(wù)器上預渲染應用再發(fā)送到客戶(hù)端。它可以從預渲染的靜態(tài)內容中恢復一樣的記錄到動(dòng)態(tài)應用程序中。
因為搜索引擎的爬蟲(chóng)程序依賴(lài)的是服務(wù)端響應而不是JavaScript的執行，預渲染你的應用有助于搜索引擎優(yōu)化。
React與其它框架/庫兼容性好
比如使用RequireJS來(lái)加載和打包，而B(niǎo)rowserify和Webpack適用于構建大型應用。它們使得那些艱難的任務(wù)不再讓人望而生畏。
不幸的是，目前的JavaScript版本并沒(méi)有提供一個(gè)打包和加載的模塊。（在未來(lái)的ES6版本上將使用System.import來(lái)解決這個(gè)問(wèn)題）。
幸運的是，我們有RequireJS和Webpack這些漂亮整潔的替代品。React是由Browserify構建的，如果你想操作圖像資源或者編譯Less和CoffeeScript，Webpack或許是一個(gè)更好的選擇。
我需要另一個(gè)開(kāi)發(fā)框架來(lái)配合React嗎？
你可以使用React來(lái)構建用戶(hù)界面，但是你仍然需要進(jìn)行AJAX調用，應用數據過(guò)濾以及其它Angular已經(jīng)實(shí)現的功能。
如果我們還需要另一個(gè)額外的JavaScript開(kāi)發(fā)框架，為什么不使用Angular？
框架由一系列模塊和規則組成。如果我們不需要它的一些模塊，甚至想將某些模塊替換，我該怎么做？
其中一種實(shí)現模塊化且能更好地進(jìn)行依賴(lài)管理的方法是通過(guò)包管理器。
但是，在A(yíng)ngular中怎么進(jìn)行包管理呢？這還得取決于你，但是得記住，Angular是自成一體的。你很可能需要讓第三方包去適配Angular。
另一方面，React僅僅只是JavaScript而已。任何用JavaScript寫(xiě)的的包都不需要用React去封裝。
對我而言，使用npm和Bower這樣的包管理器更好。我們可以選擇自己的組件和工具集。需要明確的是：這比使用像Angular這樣的綜合性開(kāi)發(fā)框架更復雜。
就這方面而言，React的好處是鼓勵使用npm，npm已經(jīng)擁有了很多現成的包。你可以從完整的初學(xué)者工具包中選擇一個(gè)開(kāi)始構建React應用的包。
轉向使用React也不是一帆風(fēng)順的！
由于A(yíng)ngular是一個(gè)應用開(kāi)發(fā)框架，它帶來(lái)了很多便利。我放棄了一些好的功能比如：封裝好的AJAX用于$http服務(wù)，$q用于應答服務(wù)，ng-show，ng-hide，ng-class和ng-if作為模板的控制語(yǔ)句——所有這一切都讓人驚奇。
React不是一個(gè)應用開(kāi)發(fā)框架，所以你需要考慮如何處理構建一個(gè)應用程序的其它方面。例如，我正在參與一個(gè)叫做react-utils的開(kāi)源項目，它可以幫助React進(jìn)行更簡(jiǎn)單便捷的開(kāi)發(fā)。
就目前而言，社區也在積極的貢獻一些類(lèi)似的組件來(lái)填補這一方面的空白。React Components就是這樣一個(gè)非官方的網(wǎng)站，你可以在這兒找到類(lèi)似的開(kāi)源組件。
React的信條不鼓勵使用雙向綁定，這也給處理表單數據和編輯表格數據帶來(lái)了很多痛苦。
無(wú)論如何，當你開(kāi)始理解Flux數據流和存儲，事情就變得簡(jiǎn)單、清晰和簡(jiǎn)單。
React是新生的。這需要一些時(shí)間讓它周邊社區發(fā)展。在另一方面，Angular已經(jīng)非常流行了，且有大量的可用擴展（例如 AngularUI和Restangular）。
雖然React的社區剛起步，但是發(fā)展得非常迅速。像React Bootstrap這樣的擴展就是一個(gè)很好的證明。我們早晚會(huì )擁有更多更豐富的組件，這只是一個(gè)時(shí)間問(wèn)題。
總結
如果你喜歡Angular的方式，在一開(kāi)始你可能會(huì )不喜歡React。主要是因為它是單向數據流且缺乏開(kāi)發(fā)應用程序的一些功能。最終很多事情還是需要自己來(lái)考慮。
然而當你開(kāi)始習慣了Flux的開(kāi)發(fā)模式和React的設計理念，我相信你會(huì )看到它的美。
Facebook和Instagram都在使用React(因為他們在領(lǐng)導這個(gè)項目)。
GitHub最新的源碼編輯器Atom就是用React構建的。
雅虎郵箱也正在使用React重構。
React已經(jīng)被大量的應用程序和科技公司所關(guān)注。（責編：陳秋歌）
原文來(lái)自：Six Revisions
已有10條評論
聯(lián)系客服
