我由Angular轉向React，為什么？

【編者按】Kumar Sanket為Toptal公司的全棧Web開發者/工程師，他在一篇文章《Why I Ditched Angular for React》中對Angular和React進行了對比，他表示Angular在快速開發大型Web項目上很受推崇，但其也存在的種種缺陷，如過于依賴 DOM操作，雙向數據綁定帶來性能問題等。而React作為由非死book和Instagramin領導的新開源項目，為JavaScript應用開 發者提供了新的開發方式，同時具有速度快、跨瀏覽器兼容、模塊化等優點，也是這些優點，讓Kumar Sanket選擇了React。下面為該文章的譯文。

幾年前，我的代碼因充滿了jQuery選擇器和回調函數而十分凌亂，后來AngularJS的出現很好地解決了這個問題。

使用AngularJS開發的項目擁有極好的可維護性，AngularJS擁有一系列簡單易用的功能，有利于快速開發大型的Web項目。

初識時，AngularJs的雙向數據綁定和所有的數據源都放在Model中的設計理念讓我驚嘆，在實際的開發中，有效地減少了應用程序中的數據冗余。

隨著應用頻率越來越多， AngularJs的一些缺陷也漸漸體現，在使用過程中的不如意讓我決定尋找一個它的替代品。

以下就是我對Angular的一些不滿。

基于DOM的程序執行。 在Angular的執行過程中過于依賴DOM操作。在Angular應用的執行時，會首先掃描所有的DOM，再通過指令進行編譯，這讓不利于開發者進行調試也很難判斷程序執行順序。

雙向數據綁定是一把雙刃劍。 隨著組件增加，項目越來越復雜，雙向數據綁定帶來性能問題。

雙向數據綁定是如何影響性能的？在JavaScript（ES5）中，并沒有實現當變量或對象改變時發出通知的功能，Angular的實現方法被叫做“Dirty-checking（臟檢查機制）”，通過跟蹤數據的改變再動態更新用戶界面（UI）。

在Angular的作用域中任何操作的執行都會引發Dirty-checking，隨著綁定數量的增加性能就會越低。

雙向數據綁定的另一個問題是，如果頁面上有許多擁有動態數據的組件，這意味著也會有很多的數據來源，如果管理不好會讓人感覺混亂不堪。但公平地說，這是開發人員的方式方法問題而不是Angular本身的缺陷。

Angular自成一體。 Angular的任何操作會引起digest cycle對注冊過的監聽器的遍歷，以實現組件動態地同步數據。這會和其它的依賴產生兼容性問題。

如果你使用的其它JavaScript庫也需要改變數據就必須用Angular的$apply函數去封裝。

或者如果它是一個工具庫，你就需要把它轉換成一個服務。似乎其它JavaScript庫都必須經過改動才能和Angular進行交互操作。

依賴注入。 JavaScript目前沒有自己的包管理器和依賴解析器，AMD、UMD和CommonJs很好的解決了這個問題。不幸的是Angular并沒有很好地 利用這些規范，Angular甚至實現了一個自己的依賴注入(DI)。但是公平地說Angular使用RequireJS依賴項注入的非官方實現已經有 了。

學習進階難。 使用Angular需要學習大量的概念，包括但不限于：

• 模塊
• 控制器
• 指令
• 作用域
• 模板
• 鏈式函數
• 過濾器
• 依賴注入

用好Angular是非常難的，不是一朝一夕的事情。

以上的原因導致我改用React。

React又哪里牛了？

React是一個由非死book和Instagramin領導的新開源項目，用于構建用戶界面，為JavaScript應用開發者提供了新的開發方式。

事先聲明：React并不是AngularJs那樣的一個應用程序開發框架。把他們作為同一個類型來比較是不公平的。

2013年五月，當JSConf EU大會上被推出時，它“單向數據流”和“虛擬DOM”等概念把觀眾震撼了。

React是用于構建用戶界面的。引用官方主頁上的說法：“對開發者來說，React就是MVC中的V”。你可以自由地寫獨立的組件，在這一點上或多或少優于Angular的指令集。

React省思了目前Web開發中遇到的一些問題并作出了最佳的實踐。

比如，它鼓勵的單向數據流，并堅信組件是被數據驅動的狀態機。

然而大部分其它類似的框架都是直接操作DOM，React并不喜歡這種方式且盡量避免這種方式。

React恰如其分地提供了定義一個UI組件所需的最基本的API。它遵循UNIX的信條：做一件事，做到極致。

想知道更詳細的關于Angular和React的比較，可以閱讀Pete Hunt（非死book/Instagram職員）寫的 Angular和React的比較 來獲取更多細節。

為什么我開始使用React？

以下是我喜歡React的一些地方。

React速度很快

與其它框架相比，React采取了一種特立獨行的操作DOM的方式。

它并不直接對DOM進行操作。

它引入了一個叫做虛擬DOM的概念，安插在JavaScript邏輯和實際的DOM之間。

這一概念提高了Web性能。在UI渲染過程中，React通過在虛擬DOM中的微操作來實對現實際DOM的局部更新。

跨瀏覽器兼容

虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的API，甚至在IE8中都是沒問題的。

模塊化

為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。

每個組件都可以進行獨立的開發和測試，并且它們可以引入其它組件。這等同于提高了代碼的可維護性。

單向數據流讓事情一目了然

Flux 是一個用于在JavaScript應用中創建單向數據層的架構，它隨著React視圖庫的開發而被非死book概念化。它只是一個概念，而非特定工具的實現。它可以被其它框架吸納。例如，Alex Rattray有一個很好的 Flux實例 ，在React中使用了Backbone的集合和模型。

純粹的JavaScript

現代Web應用程序與傳統的Web應用有著不同的工作方式。

例如，視圖層的更新需要通過用戶交互而不需要請求服務器。因此視圖和控制器非常依賴彼此。

許多框架使用Handlebars或Mustache等模板引擎來處理視圖層。但React相信視圖和控制器應該相互依存在一起而不是使用第三方模板引擎，而且，最重要的是，它是純粹的JavaScript程序。

同構的JavaScript

單頁面JS應用程序的最大缺陷在于對搜索引擎的索引有很大限制。React對此有了解決方案。

React可以在服務器上預渲染應用再發送到客戶端。它可以從預渲染的靜態內容中恢復一樣的記錄到動態應用程序中。

因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助于搜索引擎優化。

React與其它框架/庫兼容性好

比如使用RequireJS來加載和打包，而Browserify和Webpack適用于構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

不幸的是，目前的JavaScript版本并沒有提供一個打包和加載的模塊。（在未來的ES6版本上將使用System.import來解決這個問題）。

幸運的是，我們有RequireJS和Webpack這些漂亮整潔的替代品。React是由Browserify構建的，如果你想操作圖像資源或者編譯 Less 和 CoffeeScript ，Webpack或許是一個更好的選擇。

我需要另一個開發框架來配合React嗎？

你可以使用React來構建用戶界面，但是你仍然需要進行AJAX調用，應用數據過濾以及其它Angular已經實現的功能。

如果我們還需要另一個額外的JavaScript開發框架，為什么不使用Angular？

框架由一系列模塊和規則組成。如果我們不需要它的一些模塊，甚至想將某些模塊替換，我該怎么做？

其中一種實現模塊化且能更好地進行依賴管理的方法是通過包管理器。

但是，在Angular中怎么進行包管理呢？這還得取決于你，但是得記住，Angular是自成一體的。你很可能需要讓第三方包去適配Angular。

另一方面，React僅僅只是JavaScript而已。任何用JavaScript寫的的包都不需要用React去封裝。

對我而言，使用npm和Bower這樣的包管理器更好。我們可以選擇自己的組件和工具集。需要明確的是：這比使用像Angular這樣的綜合性開發框架更復雜。

就這方面而言，React的好處是鼓勵使用npm，npm已經擁有了很多現成的包。你可以 從完整的初學者工具包中 選擇一個開始構建React應用的包。

轉向使用React也不是一帆風順的！

由于Angular是一個應用開發框架，它帶來了很多便利。我放棄了一些好的功能比如：封裝好的AJAX用于$http服務，$q用于應答服務，ng-show，ng-hide，ng-class和ng-if作為模板的控制語句——所有這一切都讓人驚奇。

React不是一個應用開發框架，所以你需要考慮如何處理構建一個應用程序的其它方面。例如，我正在參與一個叫做 react-utils 的開源項目，它可以幫助React進行更簡單便捷的開發。

就目前而言，社區也在積極的貢獻一些類似的組件來填補這一方面的空白。 React Components 就是這樣一個非官方的網站，你可以在這兒找到類似的開源組件。

React的信條不鼓勵使用雙向綁定，這也給處理表單數據和編輯表格數據帶來了很多痛苦。

無論如何，當你開始理解Flux數據流和存儲，事情就變得簡單、清晰和簡單。

React是新生的。這需要一些時間讓它周邊社區發展。在另一方面，Angular已經非常流行了，且有大量的可用擴展（例如 AngularUI和Restangular）。

雖然React的社區剛起步，但是發展得非常迅速。像React Bootstrap這樣的擴展就是一個很好的證明。我們早晚會擁有更多更豐富的組件，這只是一個時間問題。

總結

如果你喜歡Angular的方式，在一開始你可能會不喜歡React。主要是因為它是單向數據流且缺乏開發應用程序的一些功能。最終很多事情還是需要自己來考慮。

然而當你開始習慣了Flux的開發模式和React的設計理念，我相信你會看到它的美。

非死book和Instagram都在使用React(因為他們在領導這個項目)。

GitHub最新的源碼編輯器Atom就是用React構建的。

雅虎郵箱也正在使用React重構。

React已經被大量的應用程序和科技公司所關注。（責編：陳秋歌）

原文來自： Six Revisions