為什麼我們選擇使用 React 而不是 Angular 構建新 UI

我們在2013年推出了Cloud Elements集成平台的v1版本，這個產品在過去幾年裡一直為客戶和公司發展提供了良好的服務。但是2017年，Web技術迅速演變，從而使用戶期望也進一步發展。現在是我們重新思考整個開發者流程的時候了，這也為我們重新思考我們的技術棧提供了一個機會。

在產品發布周期和發布期限的世界中，技術的選擇至關重要。以下是我們一路走來的歷程，幫助你揭開一些關於React的實用亮點。

我們來自哪裡

在React之前，我們使用AngularJS，這可能是當時被選中的最流行的前端框架。 但是如上所述，時過境遷，AngularJS v1.x的統治已被其年輕的小弟Angular 2所篡奪。

離開AngularJS v1.x的一個主要目的是這個框架的生命結束的可預見性。 雖然它仍然得到積極的支持，但這是一個向新事物轉變的好機會。

使用 JavaScript 框架的優點

開發團隊知道繼續使用 JavaScript 框架將提供幾個顯著的優點：

效率：通過結構良好的預構建模式和功能，可以更快地實現過去需要數月和數百行代碼才能實現的項目。

安全性：JavaScript 框架內置安全測試，並且可以得到由成員和用戶也作為測試人員的大型社區支持。

成本：大多數框架是開源和免費的。由於它們可以幫助工程師更快地構建定製解決方案，因此 Web App 的最終價格將會降低。

為什麼選擇 React

當在考慮構建我們新 UI 的不同選擇時，React 顯然是一個明智的選擇，因為它的描述性，高效性和靈活性。與 Angular 不同，ReactJS 是一個基於 JavaScript 的開源庫，帶有 JSX 編譯器。它主要關注用戶界面，允許我們創建可重用的 UI 組件。

React 都是基於組件的。使用 React 構建應用程序是將這些組件中的許多組合在一起，將應用程序 UI 帶入生活 -- 非常像樂高玩具！這些封裝的組件管理自己的狀態，因為組件邏輯是用 JavaScript 而不是模板編寫的，你可以輕鬆地通過應用程序傳遞豐富的數據，而不用擔心 DOM 中的狀態。

你可以為應用程序中的每個狀態設計一個簡單的視圖，並且 React 會在數據更改時處理組件的呈現。

雖然有些人將爭取完全無狀態的組件，但 React 的真正威力和性能來自於接受應用程序狀態概念。

使用 React，你應該永遠記住，它實際上並不是一個 JS 框架，而是一個用於渲染視圖的庫。

雖然有許多框架可供選擇（例如，Vue，Ember 和 Angular 2），但 React 具有一些關鍵優勢：

JSX 是一種 JavaScript 語法，它啟用了 HTML 的引用，並使用 HTML 標籤的語法來渲染子組件。它促進機器可讀代碼的構建，並提供了一個在編譯時驗證文件中組合組件的能力。

由於使用虛擬 DOM，與 Angular 1.x 相比，它帶來了極大的性能提升。除此之外，React 組件可以在應用程序之間創建和重用。

ReactJS 和 AngularJS 的主要區別在於 React 是以 JS 為中心的，而 AngularJS 是以 HTML 為中心。JavaScript 要比 HTML 更強大，這使得 React 更加簡單，集中和一致。

React 如何改進了我們的開發體驗

React 通過 Stackoverflow，Reactiflux Chat，Freenode IRC，Facebook 和 Twitter 等論壇提供支持，這也讓我們在選擇時更容易做出決定。

React 可能不會做任何事情，但它提供了一個補充工具的列表，包括調試工具，組件工作台，JSX 集成，基本入門工具包，全棧入門工具包，模型管理以及與其他平台緊密合作的其他工具。

React 是 Facebook 和 Instagram 的用戶界面使用的框架，這也顯示出了它動態，高流量應用程序的效率。React 可能是增長最快的JS「框架」 —— 截至今天，GitHub 有超過 1,000 個貢獻者。

儘管 React 有一個學習曲線，但它使應用程序開發變得簡單易懂。此外，它非常適合複雜，高負載的場景和下一代軟體解決方案。

數據來源: https://insights.stackoverflow.com/survey/2017

React 提供了一些有用的開發者工具來創建需要零配置的應用程序。隨著平台的不斷增長，React 不斷發布新功能和升級。最近發布的是 webpack 2，因直接編寫和導入 ES6 模塊，且不需要將它們編譯到 CommonJS 中而有名，這有助於捕獲更多的錯誤。

是什麼使得 React 與眾不同

React 本身不是一個框架。如前所述，它應該被認為是視圖渲染引擎或組件模型。

React 提供可重複使用的可配置組件，讓您快速入門。網路上有許多易用的 React 組件，幾乎涵蓋了所有方面：表單（react-form），狀態管理（Redux），SPA 路由（react-router），實時消息（reactfire），管理非同步任務（react-axios），繪圖（react-sparklines）-- 不勝枚舉。

這是一個很好的圖表，顯示了 React 和 Angular 之間的主要區別：

數據來源: https://da-14.com/blog/reactjs-vs-angular-comparison-which-better

結論

當你考慮轉向使用 React 或基於 React 構建時，了解你的數據以及你希望將如何發展是你在邁步前進之前必須弄清楚的。例如，React 使用單向數據綁定，其中數據流僅以單一方式進行。因此，你將需要始終關注數據發生變化的地方，使其在大型應用程序中更容易進行調試。

你還需要深入了解你需要解決的業務問題，以及你需要什麼數據來回答這些問題。我們是跨團隊的數據驅動型組織。因此，在工程中，我們使用監控和數據收集來了解哪些雖然需要花費時間來投入，以及如何最好地利用我們的資源。總的來說，在基於 React 上構建新的 UI，我們克服了困難，但我們從來沒有忘記過我們的主要目標 —— 減少耗費的時間以提升價值、數據的靈活性，同時留下進步和創新的空間。

來自：開源中國社區

鏈接：https://www.oschina.net/translate/why-we-built-our-new-developer-ui-react-instead-angular

原文：https://www.programmableweb.com/news/why-we-built-our-new-developer-ui-react-instead-angular/analysis/2017/07/06

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！