終極 JavaScript 框架的比較：Angular 與 React

我幾乎每天都會被問到的一個問題是我應該從 ReactJS 還是 Angular 開始？ 但是，在我繼續之前，讓我給你一個免責聲明。

這不是一個我要抨擊其中一個或另一個的博客，或者說你應該總是使用一個而不是另一個。 每個開發人員和每個項目都是完全不同的，他們有不同的要求，所以說你應該總是使用 ReactJS 或總是使用 Angular 是非常愚蠢的。

邏輯論證

你可能會爭辯說 Angular 是一個框架，而 React 在技術上本身就是一個庫。 我不否認這個事實，但這是我現在不想討論的論點。 你可以添加一些包到 React 中，將它變成一個直接與 Angular 競爭的框架。 我們正在比較兩個生態系統，而不是確切的框架與確切的庫。

學習曲線

讓我們從 Angular 開始。 還有一個免責聲明：當我說 Angular 時，我指的是 Angular 4 而不是 AngularJS。

Angular 是一個大框架，這意味著它功能強大並且包含很多內容。 有很多東西要學。 你會聽到很多新的令人生畏的詞彙，比如依賴注入、指令裝飾器、管道等。然後你必須處理 Typescript，它是 JavaScript 加上一堆其他特性，包括靜態類型。

Angular 比 React 更有主見，這是我認為的優勢之一，因為使用 React，你可以用一百萬種不同的方式做同樣的事情。 使用 Angular，通常有一種或兩種方法來做某些事情，這使得它更容易遵循，給你更清晰的指示，告訴你應該做什麼。

但話又說回來，它歸結為偏好。 您可能喜歡以不同方式做事的靈活性。 就像我提到的，如果我們只討論核心庫，ReactJS 就是一個庫，它比 Angular 框架更小，更容易學習。 你可以說你會在更短的時間內學習 React。 React 本身就是一個很棒的視圖庫，但對於大型應用程序來說它甚至沒有那麼強大。 如果你想在 React 中路由、驗證、HTTP 請求，你將不得不安裝其他包，這增加了學習曲線。

如果您查看來自兩個不同開發人員的 React 代碼，無論他們是在發出 HTTP 請求還是處理狀態和屬性，他們可能看起來完全不同。 所有這些東西都可以以非常不同的方式處理，而且很多時候它可能以錯誤的方式處理。

您找到了最佳實踐，所有問題都消失了，但這確實增加了學習曲線。

不像 Angular React 不使用模板。 它使用稱為 JSX 或 JavaScript 擴展或 JavaScript 語法擴展的東西，它允許我們在 JavaScript 中嵌入 HTML。 起初，這似乎有點古怪。 尤其是當您可能被教導將標記和 JavaScript 分開時。

可以把它想像成將 HTML 放入 JavaScript 中並進行了一些不同的更改：您不能使用類屬性，而必須使用類名。

最後，我們有 Redux。 React 通常與作為應用程序級別狀態管理器的 Redux 或 Flux 一起使用。 在我看來，Redux 只是設置它並且學習它的概念很難。

我認為它被過度使用了。 我認為很多開發人員在不需要的地方使用 redux。 較小的應用程序不需要它，但許多開發人員確實堅持使用它。 這又歸結為偏好。 Redux 非常強大，我不想把它拿走。 在談論學習曲線時，很難掌握。

獲勝者：這是平局

表現

直接比較 Angular 和 React 的性能是不公平的。 Angular 是一個完整的從前到後的框架，它包括路由、表單工具、HTTP 庫、響應式擴展等。所有這些特性使框架膨脹並使其變慢。 然而，React 本身只是一個視圖庫，它更小更快。

一旦你開始添加像路由器、HTTP 客戶端或任何你要添加到你的 React 應用程序的包，那麼它就會開始出現在 Angular 的位置上，然後你可以開始公平地比較它們，但即使在那之後 React 仍然贏得表演部門。 總的來說，這是一項非常快速的技術。

在引擎蓋下從 Angular 2 到 Angular 4 的變化他們做了很多來提高性能。 Angular 4 的性能優於 Angular 2。儘管如此，React 仍然在性能部門獲勝。

角度與反應。 資料來源：Academind.com

獲勝者：反應

特徵

這兩個框架有很多相同的一般特性和優勢：它們組織你的代碼，它們是基於組件的，它們提供動態標記等。它們習慣於做很多相同的事情，並且它們共享一個很多相同的功能。

我們將看看一些單獨的功能。 Angular 的核心功能顯然比 React 多得多。 讓我提醒您，我們正在談論與 React 一起使用的兩個生態系統和通用包。

Angular 是一個包羅萬象的框架。 它帶有組件路由器、可觀察的響應式擴展、HTTP 客戶端、用於驗證的表單模塊等等。 此外，它以一種其他框架沒有真正做到的方式提供雙向數據綁定。 使用 ng model 指令將數據從視圖綁定到模型非常容易。

Angular 還支持 MVC（模型視圖控制器）或至少與該設計模式不同的方面。 它還具有允許您輕鬆實施測試的功能：單元測試和端到端測試。 Angular 包含構建企業級前端應用程序的功能。 另一方面，React 的核心內容並不多。 但是，可以添加一些東西來賦予它 Angular 包含的開箱即用的功能以及一些額外的功能。

React 使用了一個非常強大的虛擬 DOM。 它創建自己的實際 Dom 的輕量級版本，並且只包含和更新需要的內容，而不是刷新整個內容。 虛擬 DOM 是 React 速度極快的一個主要原因。

React 使用比標準模板更強大的 JSX，因為你可以在其中放入任何類型的 JavaScript。 JSX 不需要使用 React，但它讓事情變得容易多了。 我想不出你為什麼不將 JSX 與 Angular 一起使用的任何原因。 React 在管理組件狀態和屬性方面也做得非常好。 它使數據非常易於使用並在組件之間傳遞。 在組件之間傳遞數據，Angular 比在 React 中要困難得多。

Core React 很難維護應用級別的狀態。 組件狀態很簡單，但如果你想要真正的應用級狀態管理，那麼你將需要 Redux 或 Flux，我之前說過，學習起來非常混亂。 經常使用的外部包，如新的 React 路由器版本 4，有點難以掌握，但一旦學會運行和設置它，它也非常強大。 也有很多不同的方式來使用它。 React 沒有像 Angular 那樣的核心 HTTP 組件，但您可以使用 Fetch 或 Axios，這是一個外部 HTTP 客戶端，然後 Enzyme 很流行用於證明 React。 有一些不同的包通常與 React 一起使用，即使它們不是實際庫的一部分。

雖然這兩種技術共享大量的特性，但如果您只是比較核心技術，那麼 Angular 是贏家。

獲勝者：角

工裝

Angular 和 React 有一些非常不錯的命令行界面。 Angular CLI 和 Create React App 都非常棒，它們確實讓我們能夠簡化開發。 Angular CLI 更強大一些，因為我們可以快速生成組件和服務之類的東西。 Create React 無法做到這一點。 就文件和基本結構而言，您必須自己創建所有內容。 兩個系統都使用 web pack，有自己的自動加載開發服務器，並有編譯和構建工具。 顯然，Angular 有轉譯 Typescript 的額外任務。 當我們運行 ng serve 時，CLI 有一個腳本。 這一切都發生在幕後。 它為此使用了稱為 TSC 或 Typescript Compiler 的東西，並且兩者都具有測試工具。 Create React App 使用 Jest 進行測試，然後這些工具的其中一個部分是能夠將您的應用程序構建到生產環境中，生成靜態資產，您可以簡單地將其上傳到服務器，也可以將其放入後端客戶端文件夾中。

如果它是一個完整的堆棧應用程序，那麼這些非常重要。 你不需要使用它們。 你可以使用 webpack 從頭開始構建一個 React 應用程序。 這些使得不僅構建應用程序而且編譯和構建它以用於生產變得更加容易。

即使在那個部門，他們也很漂亮。

獲勝者：角

生態系統

正如我所說，這兩種技術都有自己的生態系統，現在已經遠遠超出了網絡瀏覽器。

Ionic 是一個流行的混合框架，它是一個 Angular 應用程序，在移動應用程序的本機包裝器中運行。 您可以使用 Angular 創建移動應用程序。 與原生應用程序相比，混合應用程序可能有點笨拙。 用戶體驗有時可能不是那麼好——沒有那麼快和反應靈敏。 在各種混合框架中，Ionic 3 是最好的一個。 還有 NativeScript，它允許我們使用 Angular 和 JavaScript 構建真正的原生應用程序 iOS 和 Android 應用程序。

儘管如此，NativeScript 至少在這一點上似乎不如 Facebook 的 React Native 好。 如果您是材料設計的粉絲，Angular 也有一個材料設計組件庫。 Angular Universal 是一個種子項目，可用於在服務器端渲染 Angular。 還有 NgRx 商店，它是一個受 Reax redux 啟發的狀態管理庫。 它基於對等減速器改變的狀態。 它還與 Reactive 擴展集成。

你會注意到的。 有一次，他們中的一個以不同的方式做另一件事。 React 和 Angular 已經成為微軟和蘋果的 JavaScript 框架。

React 有相當的生態系統。 它具有流行的 React Native。 這是使用 Web 技術構建移動應用程序的最佳方式。 React Native 速度很快，如果構建正確，許多應用程序都可以與基於 Swift 或 Java 構建的本機應用程序一起使用。 React 有一個名為 Material-UI 的材料設計庫，它很像 Angular 的材料設計組件，但更成熟。 JS 是一個用於渲染服務器端 React 應用程序的框架。 它旨在以最簡單的方式做到這一點，因此可以將其與 Angular Universal 進行比較。 MobX 是另一種管理狀態的方式。 它的工作方式與 redux 有點不同。 它提供了一組裝飾器來定義可觀察對象和觀察者，並將反應式邏輯引入您的狀態。

Storybook 是 React 的開發環境。 它允許您瀏覽組件庫，查看每個組件的不同狀態，並交互式地開發和測試組件。 Reactive VR 正在讓 React 進入虛擬現實。 React 桌面是一個構建在 Reacts 庫之上的 JavaScript 庫，據稱它為 Web 帶來了原生桌面體驗，具有許多 macOS 和 Windows 10 組件。 React 生態系統非常龐大和強大。 React 正在進入技術的各個方面，它顯然是贏家。

獲勝者：反應

穿西裝打領帶的人使用 Angular，留著邋遢鬍鬚的時髦人士使用 React。

底線：這是一條領帶

如果您在這些框架之間做出決定，請查看不同的類別，看看您對什麼感興趣。 試試它們，看看你能更快地拿起哪一個。 比這個博客做更多的研究。 您永遠不會從一個博客中獲得所需的所有信息，因此請閱讀更多內容。

如果你正在尋找一個更大的生態系統，其中包括原生移動應用程序開發，那麼選擇 React 不要三思而後行。 如果你追求功能，Angular 是巨大的。 有比你需要的更多的功能。