Foreword：

首先那要說明下蛆挫，以下是我看到的一篇文章琉朽，但是原文是英文的淤袜，我只是做一個搬運(yùn)工把他搬過來~主要也是為了能在搬運(yùn)過程中更好的理解作者的想法痒谴。OK，廢話到此為止铡羡。

Started:

為你的 web 應(yīng)用選擇一個框架是無法抗拒的积蔚。Angular 和 React 最近都很受歡迎，最近又出現(xiàn)了一個新貴吸引了很多關(guān)注： VueJS 蓖墅。而且库倘，這些只是在這個領(lǐng)域新鮮血液的一部分。所以论矾，我們應(yīng)該怎樣選擇教翩？一個關(guān)于利弊的清單總是沒有壞處的。

在我們開始之前?—?SPA or not?

首先贪壳，你應(yīng)該明確你的應(yīng)用是否需要單頁面應(yīng)用還是多頁面的方法饱亿。你可以通過去閱讀這篇文章作者的博客，有一篇關(guān)于多頁面和單頁面應(yīng)用的對比闰靴，做出適合你的選擇彪笼。

如今的新人 Angular, React , Vue

首先，我想討論一下生命周期和長遠(yuǎn)的考慮蚂且。然后配猫，我們將重點(diǎn)轉(zhuǎn)向這三個 JavaScript 框架的功能和概念。最后杏死，得出我們的結(jié)論泵肄。

以下是我們今天要解決的問題：

• 框架和庫有多成熟捆交？
• 框架可能會在很短的時間內(nèi)出現(xiàn)嗎？
• 他們相應(yīng)的社區(qū)有廣泛的幫助嗎腐巢？
• 為每個框架找到相應(yīng)的開發(fā)者的困難程度品追？
• 框架的基本編程概念是什么？
• 對一個大項(xiàng)目或者小項(xiàng)目來說冯丙，使用框架的難易程度肉瓦？
• 每個框架的學(xué)習(xí)曲線是什么樣的？
• 你希望框架能夠給你提供怎樣的性能胃惜？
• 在底層的能否有更仔細(xì)的了解泞莉？
• 用選擇的框架如何開始開發(fā)？

準(zhǔn)備就緒蛹疯，開始戒财！

1. 生命周期和長遠(yuǎn)的考慮

1.1 歷史

Angular 是一個基于 TypeScript 的 Javascript 框架。 由 Google 開發(fā)和維護(hù)捺弦，它被描述為“超級英雄般的JavaScript MVW 框架”饮寞。 Angular（也稱為“Angular 2+”，“Angular 2”或“ng2”）是 AngularJS（也稱為“Angular.js”或“AngularJS 1.x”）的改寫列吼，大多為升級了兼容性的繼承者幽崩。盡管最初般被的 AngularJS 于2010年10月發(fā)布，但它仍然在修復(fù)bug等問題寞钥。新的Angular（sans JS）于2016年9月推出慌申，版本為2.最新的主要版本為版本4， 版本3被跳過理郑。Google蹄溉，Wix，weather.com您炉，healthcare.gov 和 Forbes 在使用Angular柒爵。

React 被描述為“用于構(gòu)建用戶界面的 JavaScript 庫”。 React 最初于2013年3月發(fā)布赚爵，由 Facebook 開發(fā)并維護(hù)棉胀，在多個頁面上使用 React 組件（不是作為單頁應(yīng)用程序）。根據(jù) Chris Cordle 撰寫的這篇文章冀膝，React 在 Facebook 上的使用遠(yuǎn)遠(yuǎn)多于 Angula r在Google上的使用唁奢。 React 也被Airbnb，Uber窝剖，Netflix麻掸，Twitter，Pinterest赐纱，Reddit论笔，Udemy采郎，Wix千所，Paypal狂魔，Imgur，F(xiàn)eedly淫痰，Stripe最楷，Tumblr待错，Walmart 等等籽孙。

Facebook 正在開發(fā)React Fiber。它會改變引擎蓋下的 React 渲染速度應(yīng)該更快火俄。更新之后犯建，會向后兼容。 Facebook 在2017年4月的開發(fā)者大會上討論了這些變化瓜客，并發(fā)布了一篇關(guān)于新架構(gòu)的非官方文章适瓦。 React Fiber 于2017年9月發(fā)布了 React 16。

Vue 是2016年發(fā)展最迅速的 JS 框架之一. Vue 將自己描述為“用于構(gòu)建交互式界面的直觀谱仪，快速和可組合的 MVVM 框架”玻熙。該框架于2014年2月首次由前 Google 員工尤雨溪發(fā)布，當(dāng)時寫了一篇關(guān)于營銷活動和數(shù)字的有趣的博客文章疯攒。 這是一次非常成功的比賽嗦随，尤其是考慮到 Vue 在沒有大公司支持的情況下獲得如同一個人的表演一樣的吸引力。 Vue 目前擁有一批核心開發(fā)人員敬尺。 2016年枚尼，版本2發(fā)布。 Vue 被阿里巴巴砂吞、百度署恍、Expedia、任天堂和 GitLab 使用呜舒，小型項(xiàng)目列表可以在 madewithvuejs.com 上找到锭汛。

以上的三中框架都采用 MIT 許可。直到2017年9月袭蝗，React 轉(zhuǎn)向特殊的 BSD3 許可唤殴。有關(guān)專利文件的討論很多。如果您對這段歷史感興趣到腥，您可以閱讀 Github 相關(guān)的問題討論朵逝，專利文件背后的原因和歷史（由 Facebook 前工程師 James Ide 撰寫），為什么您不應(yīng)該害怕（由 Dennis Walsh 提供）乡范， 警告不要使用創(chuàng)業(yè)公司（由 RaúlKripalani 提供）以及 Facebook 上關(guān)于此主題的陳述：解釋 React 的許可配名。無論如何啤咽，所有這些都不應(yīng)該像 Facebook 最終宣布的那樣，React 將使用 MIT 許可渠脉。

1.2 核心發(fā)展

綜上所述宇整，Angular 和 React 擁有大公司的支持和使用。Facebook芋膘，Instagram 和 Whatsapp 將 React 用于他們的頁面鳞青。 谷歌在很多項(xiàng)目中使用它，例如为朋，新的 Adwords 用戶界面是使用 Angular＆Dart 實(shí)現(xiàn)的臂拓。 再次，Vue 是由一群通過 Patreon 和其他贊助方式支持其工作的個人實(shí)現(xiàn)的习寸。 您可以自行決定這是正面還是負(fù)面胶惰。 MatthiasG?tzke 認(rèn)為 Vue 的小團(tuán)隊是一個好處，因?yàn)樗鼤?dǎo)致更簡潔霞溪，更少的過度設(shè)計的代碼或者 API孵滞。讓我們來看看一些統(tǒng)計數(shù)據(jù)：Angular 在他們的團(tuán)隊頁面上列出了36個人，Vue 列出了16個人威鹿，而 React 沒有團(tuán)隊頁面剃斧。 在 Github 上，Angular 擁有超過25,000星和463名貢獻(xiàn)者忽你，React 擁有超過7萬星和超過1,000個貢獻(xiàn)者幼东，而 Vue 擁有近6萬的星和120名貢獻(xiàn)者。 您還可以查看 Github Stars 的 Angular科雳，React 和 Vue 歷史根蟹。 再次，Vue 似乎趨勢非常好糟秘。 根據(jù) bestof.js 的數(shù)據(jù)简逮，在過去三個月中，Angular2 的平均每天獲得31顆星尿赚，React 74顆星和 Vue.JS 107顆星散庶。

1.3 市場生命周期

由于各種名稱和版本，很難在 Google 的趨勢中比較 Angular凌净，React 和 Vue悲龟。 一種近似的方法可能是搜索“ Internet＆technologies ”類別。 結(jié)果如下：

好吧冰寻。 Vue 在2014年前還沒有被創(chuàng)建须教，所以這里有些不對勁。 La Vue是法國人的“觀看”斩芭，“視線”或“意見”轻腺。 也許就是這樣乐疆。 VueJS 和 Angular 或 React 的比較也不公平，因?yàn)?VueJS 幾乎沒有任何結(jié)果贬养。

那么挤土，我們試試其他的東西吧。 ThoughtWorks 的技術(shù)雷達(dá)給人留下了良好的印象煤蚌，關(guān)于技術(shù)如何隨著時間演變的耕挨。 Redux 正處于采用階段，并且它在許多 ThoughtWorks 項(xiàng)目中具有無可估量的價值尉桩。 Vue.js 正處于試用階段。 它被描述為 Angular 的輕量級和靈活的替代品贪庙，學(xué)習(xí)曲線較低蜘犁。 Angular2 處于評估階段，它已被 ThoughtWork 團(tuán)隊成功使用止邮，但尚未獲得強(qiáng)有力的推薦这橙。根據(jù)上一次 Stackoverflow 2017調(diào)查，React 被67％的被調(diào)查開發(fā)者喜愛而 AngularJS 則是52％导披。 沒有興趣繼續(xù)開發(fā)使用 AngularJS 的為48%屈扎，React 為33%。 在這兩項(xiàng)調(diào)查中撩匕，Vue 都沒有進(jìn)入前十名鹰晨。 接下來是 statejs.com 調(diào)查，比較了“前端框架”止毕。 最有趣的事實(shí)：React 和 Angular 有100％的認(rèn)知度模蜡，23％被調(diào)查的人不知道 Vue。 關(guān)于滿意度扁凛，會再次使用的 React 有92％忍疾，Vue 89％ 而 Angular 2僅獲得65％。另一個客戶滿意度調(diào)查呢谨朝？ Eric Elliott 于2016年10月開始評估Angular 2和 React卤妒。 只有38％的受訪者會再次使用 Angular 2，而84％的人會再次使用 React字币。

1.4長期支持和遷移

正如 Facebook 在其設(shè)計原則中所述则披，React API 非常穩(wěn)定。 還有一些腳本可以幫助您從當(dāng)前的 API 轉(zhuǎn)移到更新的 API ：react-codemod纬朝。遷移非常簡單收叶，并且不需要作為長期支持版本。 在這篇 Reddit 文章中共苛，人們注意到升級并不是個問題判没。 React 團(tuán)隊撰寫了一篇關(guān)于他們的版本控制計劃的博客文章蜓萄。當(dāng)他們發(fā)布棄用警告時，他們會在下一個主要版本中的行為更改之前保留當(dāng)前版本的其余部分澄峰。以下沒有計劃更改為新的主要版本 - v14于2015年10月發(fā)布嫉沽，v15于2016年4月發(fā)布，而v16尚未發(fā)布日期俏竞。 正如React核心開發(fā)人員最近指出的绸硕，升級不應(yīng)該是一個問題。

關(guān)于 Angular魂毁，有一篇關(guān)于版本控制和發(fā)布 Angular 的博客玻佩，從 v2 發(fā)布開始。 每六個月會有一次重大更新席楚，并且至少有六個月（兩次主要發(fā)布）的棄用期咬崔。在文檔中標(biāo)記了一些實(shí)驗(yàn)性的 API，其擁有較短的棄用期烦秩。目前還沒有官方聲明垮斯，但根據(jù)這篇文章，Angular 團(tuán)隊已經(jīng)宣布了從 Angular 4開始的長期支持版本只祠。這些版本將在下一個主要版本發(fā)布之后至少支持一年兜蠕。這意味著至少在2018年9月之前支持 Angular 4，并提供 bug 修復(fù)和重要補(bǔ)丁抛寝。 在大多數(shù)情況下熊杨，將 Angular 從v2更新到v4與更新 Angular 依賴關(guān)系一樣簡單。 Angular 還提供了有關(guān)是否需要進(jìn)一步更改的信息指南墩剖。

Vue 1.x到2.0的更新過程對于一個小應(yīng)用程序來說應(yīng)該很容易猴凹，開發(fā)人員團(tuán)隊聲稱90％的API 保持不變。 在控制臺上有一個很好的升級岭皂，診斷遷移郊霎、輔助工具。 一位開發(fā)人員指出爷绘，從v1到v2的更新在大型應(yīng)用程序中沒有什么改變书劝。 不幸的是，關(guān)于下一個主要版本或關(guān)于長期支持版本計劃的信息沒有清晰的（公共）路線圖土至。

還有一件事：Angular 是一個完整的框架购对，并提供了很多捆綁在一起的東西。 React 比Angular 更靈活陶因，你可能會使用更獨(dú)立骡苞，不穩(wěn)定，更快速方便的庫，這意味著您需要自行處理相應(yīng)的更新和遷移解幽。如果某些包裹不再被保留贴见，或者某些其他包裹在某些時候成為事實(shí)上的基準(zhǔn)，這也可能是不利的躲株。（沒搞懂作者這句換的意思...）

1.5人力資源和招聘

如果你的 HTML 開發(fā)人員不想學(xué)習(xí)更多的 Javascript片部，最好選擇 Angular 或 Vue。 React 需要學(xué)習(xí)更多的 Javascript（稍后會討論這個）霜定。你有沒有設(shè)計人員接近代碼档悠？ 用戶“pier25”在 Reddit 上指出，React 讓你有一種感覺望浩，如果你在 Facebook 工作辖所，每個人都是超級英雄般的開發(fā)人員。在現(xiàn)實(shí)中曾雕，你不一定能找到一個可以修改 JSX 的設(shè)計師奴烙。因此，使用 HTML 模板將更容易剖张。

關(guān)于 Angular 的好處是，從另一家公司新來的的 Angular 2開發(fā)人員將很快熟悉所有必要的約定揩环。由于在架構(gòu)決策 React 則各不相同搔弄，開發(fā)人員需要熟悉特定的項(xiàng)目設(shè)置。

如果你的開發(fā)人員具有面向?qū)ο蟮谋尘盎蛘卟幌矚g Javascript丰滑，那么 Angular 也很好顾犹。 為了支持這個歌觀點(diǎn)，以下是馬赫什昌德的話：

I am not a JavaScript developer. My background is building large-scale enterprise systems using “real” software platforms. I started in 1997 building applications using C, C++, Pascal, Ada, and Fortran. (…) I can clearly say that JavaScript is just gibberish to me. Being a Microsoft MVP and expert, I have a good understanding of TypeScript. I also don’t see Facebook as a software development company. However, Google and Microsoft are already the largest software innovators. I feel more comfortable working with a product that has strong backing from Google and Microsoft. Also (…) with my background, I know Microsoft has even bigger plans for TypeScript.

好吧......我應(yīng)該提到褒墨，Mahesh 是微軟的區(qū)域總監(jiān)炫刷。

2. React, Angular & Vue 的比較

2.1組件

以上討論的框架都是基于組件的。組件獲取輸入郁妈，并在內(nèi)部執(zhí)行一些行為或計算之后浑玛，它返回一個呈現(xiàn)的 UI 模板（登錄/注銷區(qū)或待辦事項(xiàng)列表項(xiàng)）作為輸出。 定義的組件有利于在網(wǎng)頁或其他組件中重復(fù)使用噩咪。 例如顾彰，您可以擁有包含各種屬性（列，標(biāo)題信息胃碾，數(shù)據(jù)行等）的網(wǎng)格組件（包含標(biāo)題組件和多個行組件）涨享，并且可以在另一個頁面上使用具有不同數(shù)據(jù)集的組件。
React 和 Vue在處理組件方面都很出色：小的仆百、無狀態(tài)的函數(shù)接收輸入厕隧，然后返回元素作為輸出。

2.2 Typescript vs. ES6 vs. ES5

React 專注于使用Javascript ES6。 Vue 則使用Javascript ES5和ES6吁讨。

Angular 依賴于 TypeScript髓迎。這為相關(guān)示例和開源項(xiàng)目提供了更多一致性（React示例可以在ES5或ES6中找到）。TypeScript 也引入了像裝飾器和靜態(tài)類型的概念挡爵。 靜態(tài)類型對于代碼智能工具很有用竖般，例如自動重構(gòu)，跳轉(zhuǎn)到定義等茶鹃。Eric Elliott 在他的文章“關(guān)于靜態(tài)類型的令人震驚的秘密”中不同意涣雕。 Daniel C Wang 表示，使用靜態(tài)類型沒有任何壞的影響闭翩，而且擁有測試驅(qū)動開發(fā)（TDD）和靜態(tài)類型是很好的挣郭。盡管沒有共識，他們也應(yīng)該減少應(yīng)用程序中的錯誤數(shù)量疗韵。

你也應(yīng)該知道可以使用 Flow 在 React 中啟用類型檢查兑障。 這是 Facebook 為 JavaScript 開發(fā)的靜態(tài)類型檢查器。Flow 也可以集成到 Vue 中蕉汪。

如果你在使用 TypeScript 編寫代碼流译，你編寫的不再是標(biāo)準(zhǔn) JavaScript。盡管TypeScript 在不斷增長者疤，但與整個 JavaScript 相比福澡，TypeScript 的用戶群仍然很小。存在一種風(fēng)險驹马，就是你的方向錯誤革砸。由于 TypeScript（雖然不太可能） 可能會伴隨著時間而消失。此外糯累，TypeScript 使得項(xiàng)目增加了很多學(xué)習(xí)方面的開銷算利。你可以在 Eric Elliott 的“Angular 2 vs. React”的比較中閱讀更多關(guān)于這方面的內(nèi)容。

更新：James Ravenscroft 在對本文的評論中寫道泳姐，TypeScript 對 JSX 有一流的支持效拭。可以無縫地對組件進(jìn)行類型檢查仗岸。所以如果你喜歡 TypeScript 并且你想使用 React允耿，這應(yīng)該不是個問題。

2.3 模板?—?JSX 還是 HTML

React 打破了長期以來的嘗試扒怖。幾十年來较锡，開發(fā)人員始終嘗試將 UI 模板和內(nèi)聯(lián) Javascript 邏輯分開，但 JSX 將這些又混合在一起盗痒。這可能聽起來很糟糕蚂蕴，但是你應(yīng)該聽Peter Hunt 的演講“ React：反思最佳實(shí)踐”（2013年10月）低散。他指出，分離模板和邏輯僅僅是技術(shù)的分離骡楼，而不是擔(dān)心熔号。你應(yīng)該構(gòu)建組件而不是模板。組件是可重用的鸟整、可組合的引镊、可單元測試的。

JSX 是一種類似 HTML 語法篮条，稍后將在 JavaScript 中進(jìn)行編譯可選預(yù)處理程序弟头。 它有一些怪癖。例如涉茧，您需要使用 className 而不是 class赴恨，因?yàn)楹笳呤?Javascript 中的受保護(hù)名稱。JSX 對于開發(fā)來說是一個很大的優(yōu)勢伴栓，因?yàn)槟阍谝粋€地方擁有了所有的東西伦连，并且代碼完成和編譯時檢查更好地工作。當(dāng)你在 JSX 中輸入拼寫錯誤時钳垮，React 將無法編譯惑淳，并打印出發(fā)生錯字的行號。如果是在 Angular 2上運(yùn)行饺窿，也會失敗汛聚。但并不會報錯（如果您使用AOT和Angular，則這個參數(shù)可能無效）短荐。

JSX 意味著 React 中的所有內(nèi)容都是 Javascript，它用于 JSX 模板和邏輯叹哭。Cory House 在2016年1月的文章中指出：“Angular 2繼續(xù)將'JS'放入HTML中忍宋。React將'HTML'放入JS中》缯郑“ 這是一件好事糠排，因?yàn)?Javascript 比 HTML 更強(qiáng)大。

Angular 模板使用特殊的 Angular 語言（比如 ngIf 或 ngFor）來增強(qiáng) HTML超升。 雖然React 需要 JavaScript 的知識入宦，但 Angular 會迫使您學(xué)習(xí) Angular 特有的語法。

Vue 具有“單文件組件”室琢。這似乎是關(guān)于分離問題的一種權(quán)衡乾闰。模板，腳本和樣式在一個文件中盈滴，但在三個不同的有序部分中涯肩。這意味著您可以獲得語法高亮，CSS 支持以及更容易使用預(yù)處理器（如 Jade 或 SCSS）。我在其他文章中已經(jīng)讀過病苗，JSX更易于調(diào)試疗垛，因?yàn)?Vue 不會顯示錯誤的 HTML 語法錯誤。這不是真的硫朦，因?yàn)?Vue 將 HTML 轉(zhuǎn)換為渲染函數(shù) 贷腕，所以錯誤顯示沒有問題（感謝 Vinicius Reis 的評論和更正！）咬展。

注意：如果你喜歡 JSX 的想法并想在 Vue 中使用它泽裳，你可以使用 babel-plugin-transform-vue-jsx。

2.4框架 VS 庫

Angular 是一個框架而不是一個庫挚赊，因?yàn)樗峁┝岁P(guān)于如何構(gòu)建應(yīng)用程序的強(qiáng)大意見诡壁，以及開箱即用的更多功能。Angular 是一個“完整的解決方案”荠割，隨時為你提供愉快的開始妹卿。不需要分析庫，路由解決方案等蔑鹦，只需開始工作即可夺克。

另一方面，React 和 Vue 更加靈活嚎朽。他們的庫可以配對各種套餐（在 npm 上有很多React铺纽，但 Vue 的套餐較少，因?yàn)樗€很年輕）哟忍。有了React狡门，你甚至可以將庫本身交換為 API 兼容的替代品，如 Inferno锅很。但是伴隨的很好的靈活性其馏，隨之而來的是更多的責(zé)任。對 React 沒有規(guī)則和有限的指導(dǎo)爆安。每個項(xiàng)目都需要有關(guān)其架構(gòu)的決策叛复，可能更容易出現(xiàn)錯誤。

另一方面扔仓，Angular 還有一堆令人困惑的構(gòu)建工具褐奥，樣板，短褲和時間接收器需要處理翘簇。如果使用起動器套件或樣板撬码，React 也是如此。他們自然是非常有幫助的缘揪，但 React 可以直接使用耍群，這可能是你應(yīng)該學(xué)習(xí)的方式义桂。有時，在 Javascript 環(huán)境中工作所需的各種工具被稱為“ Javascript 疲勞”蹈垢。 Eric Clemmons 有一篇關(guān)于它的文章慷吊，他這樣說：

“There are still a bunch of installed tools, you are not used to, when starting with the framework. These are generated but probably a lot of developers do not understand, what is happening under the hood?—?or it takes a lot of time for them to do.”

Vue似乎是三個框架中最干凈和最輕的框架。 GitLab有關(guān)于其決定使用 Vue 的博客文章：

“Vue.js comes with the perfect balance of what it will do for you and what you need to do yourself.(…) Vue.js is always within reach, a sturdy, but flexible safety net ready to help you keep your programming efficient and your DOM-inflicted suffering to a minimum.”

他們喜歡簡單易用曹抬，源代碼非常易讀溉瓶，不需要任何文檔或外部庫。一切都非常簡單谤民。 Vue.js“對任何東西都不做過多的假設(shè)和約束”堰酿。還有另一篇博客關(guān)于向Vue轉(zhuǎn)變來自 Pixeljets。 React 在狀態(tài)的意識上张足，向JS世界邁進(jìn)了一大步触创，它很好的為很多人展示了真正的功能性編程。由于 JSX 的限制 React 和 Vue 比較的一個缺點(diǎn)是將組建分割成更小的組件的問題为牍。這里是文章的引用：

“For me and my team the readability of code is important, but it is still very important that writing code is fun. It is not funny to create 6 components when you are implementing really simple calculator widget. In a lot of cases, it is also bad in terms of maintenance, modifications, or applying visual overhaul to some widget, because you need to jump around multiple files/functions and check each small chunk of HTML separately. Again, I am not suggesting to write monoliths?—?I suggest to use components instead of microcomponents for day-to-day development.”

Vue 的異議者和支持者哼绑，在 Hacker news 和 Reddit?上有很有趣的討論。

2.5狀態(tài)管理和數(shù)據(jù)綁定

構(gòu)建用戶界面很困難碉咆，因?yàn)樘幪幎加袪顟B(tài)抖韩，隨著時間的推移數(shù)據(jù)變化會帶來復(fù)雜性。定義狀態(tài)工作流程對于應(yīng)用程序的增長和變得更加復(fù)雜時有很大的幫助疫铜。對于有限的應(yīng)用程序茂浮，這可能是沒有有必要的，像 Vanilla JS 就足夠了壳咕。

它是如何工作的席揽？ 組件在任何時間點(diǎn)繪制 UI。當(dāng)數(shù)據(jù)發(fā)生變化時谓厘，框架會重新渲染整個 UI 組件驹尼，所以顯示的數(shù)據(jù)始終是最新的。我們可以將這個概念稱為“ UI 作為函數(shù)”庞呕。

React 經(jīng)常與 Redux 捆綁使用。 Redux 三個基本原則：

• 單一的來源
• 狀態(tài)是只讀的
• 通過函數(shù)更改

換句話說：完整應(yīng)用程序的狀態(tài)存儲在單個存儲中的對象樹中程帕。這有助于調(diào)試應(yīng)用程序住练，并且一些功能更容易實(shí)現(xiàn)。狀態(tài)是只讀的愁拭，只能通過動作來改變讲逛，以避免競爭條件（它也有助于調(diào)試）。編寫 Reducers 來指定狀態(tài)如何通過動作轉(zhuǎn)換岭埠。

大多數(shù)教程和樣板文件已經(jīng)集成了 Redux盏混，但是如果沒有它蔚鸥，你也可以使用 React（并且根本不需要 Redux）。Redux 在代碼中引入了復(fù)雜性和相當(dāng)強(qiáng)的約束條件许赃。如果你正在學(xué)習(xí) React止喷，那么在你使用 Redux 之前，你應(yīng)該考慮學(xué)習(xí)普通的 React混聊。 你肯定應(yīng)該閱讀 Dan Abramov 的“你可能不需要 Redux”弹谁。

一些開發(fā)人員建議使用 Mobx 而不是 Redux。 你可以把它看作是一個“自動 Redux”句喜，這使得一開始就更容易使用和理解预愤。如果你想看看，你應(yīng)該從介紹開始咳胃。你還可以閱讀 Robin 的 Redux 和 Mobx 之間的比較植康。同一作者還提供有關(guān)從 Redux 移動到 Mobx 的信息。如果你想檢查其他 Flux 庫展懈，此列表非常有用销睁。如果你是來自 MVC 世界，你將需要閱讀 Mikhail Levkovsky 撰寫的文章“ Redux 中的思考（當(dāng)你認(rèn)識的所有人都是 MVC）”标沪。

Vue 可以使用 Redux榄攀，但它提供 Vuex 作為自己的解決方案。

React 和 Angular 之間的巨大差異是單向與雙向綁定金句。當(dāng) UI 元素（例如檩赢，用戶輸入）被更新時，Angular 的雙向綁定改變模型狀態(tài)违寞。React 只有一種方式：先更新模型贞瞒，然后呈現(xiàn) UI 元素。Angular 的方法在代碼中更干凈趁曼，開發(fā)人員更容易實(shí)現(xiàn)军浆。React 的方式可以獲得更好的數(shù)據(jù)概覽，因?yàn)閿?shù)據(jù)只向一個方向流動（這使得調(diào)試更容易）挡闰。

這兩個概念都有其優(yōu)點(diǎn)和缺點(diǎn)乒融。你需要了解這些概念并確定它是否會影響您的框架決策。文章“雙向數(shù)據(jù)綁定：Angular 2和 React”提供了一個很好的解釋摄悯。在這里你可以找到一些交互式代碼示例（3歲（啥意思...）牺蹄，僅適用于Angular 1和React....）纱新。 最后但并非最不重要的一點(diǎn)霹肝，Vue 支持單向綁定和雙向綁定（默認(rèn)為單向）叉袍。

2.6其他編程概念

Angular包含依賴注入，即一個對象將依賴項(xiàng)（服務(wù)端）提供給另一個對象（客戶端）的模式瘪阁。 這導(dǎo)致更多的靈活性和更干凈的代碼撒遣。模型 - 視圖 - 控制器模式（MVC）將項(xiàng)目分為三個部分：模型邮偎，視圖和控制器。作為 MVC 框架的角度 MVC 開箱即用义黎，反應(yīng)只有 V禾进。所以你需要自己解決 M 和 C.

2.7靈活性和縮小到 microservices

你只需將JavaScript庫添加到源代碼中，就可以可以使用 Vue 和 React轩缤。由于使用了 TypeScript命迈，Angular 就沒有這么方便了。

我們現(xiàn)在更多地轉(zhuǎn)向 microservices 和 microapps火的。 React 和 Vue 通過只選擇真正必需的東西壶愤，可以更多地控制應(yīng)用程序的大小。他們提供了更多的靈活性馏鹤，使用前應(yīng)用程序的一部分從 SPA 轉(zhuǎn)移到 microservices征椒。Angular 最好工作在 SPA ，因?yàn)樗赡芴纺[而無法用于 microservices湃累。

有些人對非 SPA 網(wǎng)站也使用 React（例如勃救，對于復(fù)雜的表單或向?qū)В＜词?Facebook 使用 React 也不是為主頁面治力，而是為特定的頁面和功能蒙秒。

2.8大小和性能

所有功能都有另一面：Angular 非常臃腫。gzip 文件大小為143k宵统，而 Vue 為23K晕讲，React 為43k。React 和 Vue 都有一個虛擬 DOM马澈，它可以提高性能瓢省。如果您對此感興趣，可以閱讀有關(guān)虛擬 DOM 和 DOM 之間的差異以及 react.js 中虛擬 DOM 的實(shí)際優(yōu)勢痊班。

為了檢查性能勤婚，我看了一下這個 js 框架基準(zhǔn)。你可以自己下載并運(yùn)行它涤伐，或者查看交互式結(jié)果表馒胆。在檢查結(jié)果之前，您應(yīng)該知道凝果，框架在基準(zhǔn)測試中作弊国章。因此這種性能檢查不應(yīng)該用于做出決定。

總結(jié)一下：Vue 具有很好的性能和最深的內(nèi)存分配豆村，但與特別慢或者快速的框架（如 Inferno ）相比，所有這些框架都非常接近骂删。再說一次：性能基準(zhǔn)只能作為附注來考慮掌动，而不能作為判斷四啰。

2.9測試

Facebook 使用 Jest 來測試其 React 代碼。在Angular 2中有 Jasmine 作為測試框架粗恢。Eric Elliott 的一篇文章中咆哮說 Jasmine “以數(shù)百種方式編寫測試和斷言柑晒，需要仔細(xì)閱讀每一個以了解它在做什么”。 輸出也很臃腫眷射，閱讀起來很費(fèi)力匙赞。Vue 缺乏測試指導(dǎo)，但尤雨溪在他的2017年預(yù)覽中寫道妖碉，該團(tuán)隊計劃在這方面開展工作涌庭。他們推薦使用 Karma。 Vue 與 Jest一起工作欧宜，并且還有 avoriaz 作為測試工具坐榆。

2.10通用和原生應(yīng)用

通用應(yīng)用程序正在將應(yīng)用程序引入網(wǎng)絡(luò)，到桌面以及 native 應(yīng)用程序的世界冗茸。React 和 Angular 都 native 本地開發(fā)席镀。Angular 擁有 native 應(yīng)用程序的 NativeScript （由 Telerik 支持）和混合應(yīng)用程序的 Ionic Framework。 使用 React夏漱，你可以查看 react-native-renderer 來構(gòu)建跨平臺的 iOS 和 Android 應(yīng)用程序豪诲。許多應(yīng)用程序（包括 Facebook ）都是用 react-native 構(gòu)建的。

Javascript 框架在客戶端上呈現(xiàn)頁面挂绰。這對整體的用戶體驗(yàn)和搜索引擎優(yōu)化是不利的屎篱。服務(wù)器端的渲染是很好的一個解決辦法。所有這三個框架都有相關(guān)的庫來尋求幫助扮授。 React 有 next.js芳室，Vue 有 nuxt.js，Angular 有... .Angular Universal刹勃。

2.11學(xué)習(xí)曲線

Angular 有一個陡峭的學(xué)習(xí)曲線堪侯。它有全面的文檔，但有時你可能會對它感到沮喪荔仁，因?yàn)槭虑楸嚷犉饋砀щy伍宦。即使你對 Javascript 有深入的理解，你也需要了解該框架背后的內(nèi)容乏梁。 安裝程序在開始時很神奇次洼，它提供了很多包含的軟件包和代碼。這可能被視為一種負(fù)面情緒遇骑，因?yàn)殡S著時間的推移卖毁，你需要學(xué)習(xí)一個大型的，預(yù)先存在的生態(tài)系統(tǒng)。另一方面亥啦，在特定情況下它可能會很好炭剪，因?yàn)樗呀?jīng)替你做出了很多決定。對于 React翔脱，你可能需要就第三方庫進(jìn)行大量重大決策奴拦。有16種不同的 flux 組合用來管理狀態(tài)。

Vue 很容易學(xué)習(xí)届吁。公司切換到 Vue 是因?yàn)樗鼘Τ跫夐_發(fā)人員來說更容易错妖。一位用戶表示，他公司的 React 應(yīng)用程序非常復(fù)雜疚沐，以至于新開發(fā)人員無法跟上代碼暂氯。借助 Vue，初級和高級開發(fā)人員之間的差距縮小了濒旦，他們可以更輕松地進(jìn)行協(xié)作株旷，并減少 bug、問題和開發(fā)時間尔邓。

有些人聲稱他們在 React 中所做的事情在 Vue 中可以寫的更好晾剖。如果你是一位無經(jīng)驗(yàn)的 Javascript 開發(fā)人員或者如果你在過去十年中主要使用 jQuery，那么你應(yīng)該考慮使用 Vue梯嗽。Vue 看起來更像是簡化的 Javascript齿尽，同時也引入了一些新的想法：組件，事件驅(qū)動模型和單向數(shù)據(jù)流灯节，它的體積也很小循头。

同時，Angular 和 React 有自己的做事方式炎疆。他們可能會阻礙你卡骂，因?yàn)槟阈枰{(diào)整你的做法，讓事情順利進(jìn)行形入。這可能是一個不利因素全跨，因?yàn)槟悴粔蜢`活，而且學(xué)習(xí)曲線陡峭亿遂。這也可能是一種好處浓若，因?yàn)槟阍趯W(xué)習(xí)技術(shù)時被迫學(xué)習(xí)正確的概念。借助 Vue蛇数，你可以用老式的方式來完成這些事情挪钓。這在開始時會更容易，但如果事情做得不好耳舅，可能會長期成為問題碌上。

當(dāng)涉及到調(diào)試時，React 和 Vue 的戲法減少了。尋找錯誤更容易馏予，因?yàn)橛懈俚牡胤娇梢圆榭绰溃褩８櫾谒鼈冏约旱拇a和庫的代碼之間有更好的區(qū)別。 使用 React 的人員報告說吗蚌，他們永遠(yuǎn)不必閱讀庫的源代碼。但是纯出，在調(diào)試 Angular 應(yīng)用程序時蚯妇，通常需要調(diào)試 Angular 的內(nèi)部以了解基礎(chǔ)模型。從好的一面來看暂筝，從 Angular 4開始箩言，錯誤信息應(yīng)該更清晰，更具信息性焕襟。

2.12Angular陨收，React 和 Vue 的底層

你想自己檢查源代碼嗎？ 你想看看事情的感覺如何鸵赖？你可能首先要查看 Github 庫：React（github.com/facebook/react）务漩，Angular（github.com/angular/angular）和 Vue（github.com/vuejs/vue）

產(chǎn)品中看到的東西也是很好的，連同底層的源代碼它褪。TodoMVC 列出了幾十個用不同的 Javascript 框架編寫的相同的 Todo 應(yīng)用程序饵骨。你可以比較 Angular，React 和 Vue 解決方案茫打。RealWorld 創(chuàng)建了一個真實(shí)世界的應(yīng)用程序居触，并且他們已經(jīng)為 Angular（4+）和 React（使用Redux）準(zhǔn)備好了解決方案。Vue 正在進(jìn)行中老赤。

結(jié)論

選擇框架

React轮洋，Angular 和 Vue 都非常好，并且他們中沒有一個明顯高于其他人抬旺。相信你的直覺弊予。 Javascript 生態(tài)系統(tǒng)中有很多嗡嗡聲。在你的搜索過程中嚷狞，你可能會發(fā)現(xiàn)很多其他有吸引力的選擇块促。盡量不要被最新，最閃亮的框架蒙蔽床未。

應(yīng)該怎么選

如果你在 Google 工作：Angular

如果你喜歡 TypeScript：Angular（或 React）

如果你喜歡面向?qū)ο缶幊蹋∣OP）：Angular

如果你需要指導(dǎo)竭翠，結(jié)構(gòu)和援助：Angular

如果你在 Facebook 工作：React

如果你喜歡靈活性：React

如果你喜歡龐大生態(tài)系統(tǒng)：React

如果你喜歡在幾十個軟件包中選擇：React

如果你喜歡 JS &“一切都是 Javascript 的方法”：React

如果你喜歡真正干凈的代碼：Vue

如果你想要最簡單的學(xué)習(xí)曲線：Vue

如果你想要最輕量級的框架：Vue

如果你想在一個文件中分離關(guān)系：Vue

如果你一個人工作或者有一個小團(tuán)隊：Vue（或 React）

如果你的應(yīng)用程序變得非常大：Angular（或 React）

如果你想用 react-native 構(gòu)建一個應(yīng)用程序：React

如果你想有很多跟你一樣的開發(fā)者：Angular（或 React）

如果你與設(shè)計師合作并需要干凈的 HTML 文件：Angular （或 Vue）

如果你喜歡 Vue 但是害怕有限的生態(tài)系統(tǒng)：React

如果你不能決定，先學(xué)習(xí) React 和 Vue薇搁，然后學(xué)習(xí) Angular斋扰。