React vs Angular: JavaScript的雙向性

在世界末日，技術的選擇起著關鍵性的作用。擁有幾年經驗的積累，我們參與了幾十種不同語言的翻譯，框架，以及書。把我們的知識融合在一起，我們決定

去總結一些關于React&Angular的問題以及分享一些觀點給大家。因此，在這篇文章中，我們將轉換我們的【前端開發】經驗在一些事情上，希望它能夠幫助你決定

哪種技術更加適合你。

什么是Angular 2?

Angular是一個開源的JavaScript框架，提供創造客戶端網站需要的一切東西。在Angular 2開發期間，你可以看到第二版本相對第一版本擺脫了不必要的復雜性。

例如，Angular2團隊幾乎摒棄掉了第一版本的所有觀念，我主要講述模塊，控制器，scopes，指令等。

從我們相關的文章中，不僅可以擴展我們的編程技巧，同時能夠掌握軟件開發的一些方法。( https://www.cleveroad.com/blog/a-fresh-take-on-5-software-development-methodologies )

然而，他們依然沒有停止讓他們的框架變得簡單。他們還添加了一些新的顯著特征和做了一些提高。在這些特點里，我們可能喜歡單個的應用程序支持

以及服務端的渲染。關于這些改善，我們無法忽略Angualr2性能提高的事實。

為什么它變得這么受歡迎？

• Angular是谷歌團隊自己想象創造出來的

• 設計的方式允許程序員在基于其它語言之后，學習angular時，不會太痛苦。

• 許多程序員指出，如果你的angular看起來很復雜—你在做一件錯誤的事

基于Angular構建的網站： 油Tube (for PS3), GoodFilms, Freelancer, Upwork

那么，為什么angular2有好處？讓我們一起看下關于它的贊成和反對的意見。

cleveroad-angular優勢和劣勢

什么是React?

不像Angular,ReactJs是基于JSX寫法的一種JavaScript的開源庫。它主要專注于用戶接口，允許創造可復用的UI視圖組件。

當使用React的時候，你要記住它不再是MVC的框架，而是一種渲染視圖的庫，在這種方式下，利用React接口集中方式，

使用者可以得到一種高度響應且平滑加載的體驗。

為什么它變得這么受歡迎?

• 項目基于非死book的標準

• 搜索引擎對于ReactJs問題的解決方案比較友好

• ReactJs的操作以及靈活性很高

有名的ReactJs構建的網站： Netflix, Feedly, Airbnb, Walmart

現在，讓我們考慮一下為什么ReactJS在我們一定的需求上，能夠很有用。

cleveroad-React的優勢和劣勢。

我們要如何去選擇呢？

現在，讓我們深入探討一些細節，這對于我們技術的選擇非常重要。

許可證

你應該了解到這些框架的秘鑰是否被頒發。大部分的秘鑰是非常靈活的，并且你可以使用他們創造一些被承認的apps，沒有任何的問題。

然而，有些類型的秘鑰限制了你的行為自由。做一些簡單的研究比學習一些沒有商業分配權利的產品更好，對嗎？

    注:Angular和ReactjS共同優點之一為兩者都是開源的，且沒有使用的限制。值得提到的是Angular使用MIT秘鑰，而React使用3-clause BSD。唯一對于BSD

顯而易見的不同是它禁止使用持牌人的姓名做廣告用途。

MVC模式

模型-視圖-控制器模式允許將一個項目的數據分離到三個組件里面：模型，視圖以及控制器。這種方式下，由于代碼分離，每一個組件的修改能夠獨立進行

增加了最終產品的質量。除了MVC模式，還有MVP和MVVM模式。

    注:在Angular2的所有特點之中，脫離盒子的可利用的MVC模式是很重要的優點，遠在react之上。由于它的縮寫只有三個字母，所以只有“V”-view。

如果你需要”M”和”C”,你應該看看其它地方來解決問題。

模板

關于Angular2的好處，值得提到的是它易于顯示模板的編寫。對數據具有非常直觀的UI，Angular允許你調用接口，用更直觀的方法來得到結果。以及要求更少

的代碼量和更加顯而易見。對于React,它需要特殊的函數來管理這些數據的顯示。大部分，它意味著你應該定義一種方式在DOM渲染之前，來將你的數據呈現出來。

在它試圖將某一元素進行渲染期間，這也許會導致斷開。

    注:在線服務創建時，你要做的百分之八十是編寫它的UI。因此，你最好權衡這些技術模板的方法，來找出最合適你的編碼操作的那個。

數據綁定

Angular使用雙向綁定，有了它的幫助，這個框架可以通過控制器將DOM連接到模型數據。一句話來總結，當用戶進行輸入，并給APP賦予新的值，不僅試圖被更新

數據也會立馬更新。因此，你不需要在APP內，寫一些方法來追蹤這些變化。

    注:Angular綁定的自動監聽方法，運作很好。

React使用單向綁定，數據流只會在單個方向進行。由于這個，你會經常注意數據改變的地方。

    注: React的方法非常易于大應用程序的調試。

值得說一句關于 客戶端 vs 服務端渲染。事實上，Angular第一版本使用的是服務端渲染，給市場創造了一定的困難。由于瀏覽器將客戶端渲染視為JavaScript，具有

優化SEO的純粹機會。這是一個很大的劣勢，因為大多數數字產品需要大量的營銷能力才能生存下去。 同時，客戶端渲染可能會影響頁面加載，然而，從第二個版本開始

Angular開發者已經解決了這個問題 將它的渲染模型放在服務端。

性能

眾所周知，Angular創造數據綁定監聽，為了追蹤到DOM里面的所有變化。只要這個頁面有所更新，Angular開始比較獲得的值與原始的值。事實是這個技術不僅檢查這

些值的變化，同時還監聽他們所有的變化。

注: 當應用在大量的應用程序上時，Angular2性能可能引起一些問題。

ReactJS開發者已經介紹了 虛擬DOM觀點，允許創造輕便的DOM樹。每次用戶與網站進行交互時，列如填充表單，React創造虛擬DOM來與之前的值做比較。框架庫

發現這兩種模型的不同之后—-虛擬DOM將被重建。所有的進程都在服務之內執行，在這種方式下，減少瀏覽器的加載。

    注: 當面對大量的數據時候，由于沒有監聽，ReactJS性能增加。

我們已經編制了圖表，顯示了這些技術的評價標準。這些分數是根據我們的個人經驗而定的。

cleveroad評價技術

我們有一個關于React vs Angular問題的小會議，我們的前端開發人員有機會討論所有這些技術的優缺點。

他們總結出Angular更加適合他們代碼操作，對于他們日常的工作任務來說。

總上所述，我們為你準備了一張圖表，這里，你可以發現Angular1.x, Angular2和React的比較。

React vs Angular版本

Cleveroad的經驗

在這兩種技術之中，我們的程序員更喜歡用Angular網站開發。有許多與這個框架相關的基礎，我們能夠更高效的工作，減少項目的開發時間。

在這種方式下，我們的客戶端由于縮短了開發周期，減少了項目的花費。

我們基于這種技術的所有項目都有大量的前端邏輯在其結構中頻繁變化。這些項目隱含著許多設計變更。React庫的使用可以提高開發時間，提高最終產品的總價格。

以下是我們的項目: Age In Days ,  Count ,  Lifetile . 所有這些Angular構建的網站在我們公司.

您也可以看看我們的技術堆棧，我們通常使用Angular2開發。

服務端方案: AWS, DigitalOcean, Hetzner, Microsoft Azure

后端技術: Node.js + Typescript 2, Angular 2

數據庫: MySQL, MongoDB, Redis, PostgreSQL

云存儲: AWS S3, Azure storage

支付: Stripe, Braintree

基礎設施和項目管理: Webpack 2, Docker and CI, Jira, Bitbucket/Git

結尾

也許，在前端世界中，選擇Angular和React之間的問題，在某種程度上可以與iOS和Android之間的選擇相媲美。我的意思是，兩者技術都有優缺點

它的追隨者和厭惡者。因此，每個開發人員都有一定的原因，使用reactjs或其他技術。

在2017年,越來越多的網站項目將會基于Angular2,因為允許簡化開發者開發的特點。列如,好的調試工具，MVC模式，服務端渲染等。 因此，它將減少

開發所需的時間，從而降低開發和維護的定價。

如果你有其它問題 — 請 contact us , 這是免費的!

 

來自：http://www.cnblogs.com/jtjds/p/7226199.html