本文通过概念分析和使用思路，详细分析了Angular和React JavaScript框架的区别。我希望我们整理出来的东西对你有用。

Angular和React JavaScript框架是红色和紫色的，这两个框架的选择成为了架构师最容易提出或考虑的问题。这篇文章可能不会告诉你哪个框架更好，但尽量从更多的角度去比较，以便在选择的时候给你提供更多的参考意见。

选择方法

在选择之前，我们试着用一些问题来看看你会选择的框架(或任何工具)，并试着用这些问题的答案来帮助我们更好地理解框架，使其更容易选择

框架本身的问题：是否成熟？幕后黑手是谁？你有什么功能？采用什么架构和模式？生态系统丰富吗？需要自我反思的问题：我和我的团队能轻松学习和掌握吗？适合我的项目吗？开发体验够好吗？

严格来说，Angular和React的比较是不公平的，因为Angular是一个功能丰富的框架，而React是UI的一个组件库，所以我们会在下面的分析中讨论一些经常和React一起使用的类库。

好，开始.

成熟

作为一个成熟的开发人员或者能够决定架构和技术方向的人，一个必不可少的技能就是能够在工作和项目中平衡成熟技术和前沿框架之间的关系，这不仅能够保持人和技术的进步，还能够保证项目或产品的交付质量。因此，我们必须小心以下可能的风险：

框架可能不稳定。主要开发商(赞助商)可能会突然放弃。如果您需要帮助，可能没有大型知识库或社区可用。

幸运的是，Angular和React似乎都不需要担心上述风险

反应

React由脸书开发和维护，用于自己的产品，包括Instagram和WhatsApp。到现在已经三年半了。这也是GitHub最受欢迎的项目之一。

有角的

Angular由谷歌维护，用于谷歌的Adwords和Fiber项目。由于AdWords是Goolge重要的黄金武器，自然Angular不太可能突然死亡。

功能

如前所述，Angular本身比React有更多的功能。当然，更丰富的功能对于一个框架来说既是优点也是缺点。两个框架都有相同的核心功能：组件化、数据绑定和平台无关的Render机制。

有角的

除了一些需要最新浏览器支持的功能外，Angular还提供以下标准功能：

依赖注入模板路由(@ angular/router)Ajax(@ angular/http)表单(@angular/forms)组件CSS包XSS保护单元测试工具

功能丰富的优势在于，您不需要额外的努力来选择第三方类库。然而，它也让你别无选择，即使你不需要这些功能(Angular4的最新版本似乎已经意识到了这个问题)

反应

与Angular相比，React本身提供的功能相对“简单”:

独立注入使用JSX，而不是传统的HTML模板XSS保护单元测试工具

与Angular相比，React为您提供了选择第三方类库的极大自由，例如：

路由(反应路由器)AJAX(获取或axios)各种CSS包(见：https://github.com/MicheleBertoli/css-in-js)更强大的单元测试(酶)

可以根据自己的需要自由(或自定义)所需的类库，这些第三方类库很容易学习。

语言和模式

随着这两个框架的流行，一些概念和技术已经出现。如果你想真正使用或掌握这两个框架，非常有必要了解以下这些概念或技术：

反应JSX

JSX是一个有争议的话题：有些人喜欢它，而另一些人则认为它是一大退步。React决定使用类似XML的语言将组件中的标签和代码结合起来，并直接用JavaScript代码编写HTML标签。

虽然混合标记和JavaScript的话题可能会有争议，但它有一个无可争议的优势：静态分析。如果JSX标记中有错误，编译器将立即报告错误，而不是在运行时等待无法解释的问题。这有助于开发人员快速排除错误，并避免其他愚蠢的错误，如拼写错误。

流动

Flow是脸书开发的一个JavaScript类型检查工具。它可以解析代码并检查常见的类型错误，如隐式转换或取消引用。

与用于类似目的的TypeScript不同，它不需要开发人员迁移到新的语言并为代码的类型检查工作添加注释。类型注释在过程中是可选的，可以用来向分析器提供其他提示。如果您想使用静态代码分析并避免重写现有代码，Flow是一个不错的选择。

Redux

Redux是一个可以清晰管理状态变化的库。它的灵感来自Flux，但也有一些简化。Redux的关键思想是应用程序的整个状态由一个单独的对象来表示，这个对象由一个名为reduce的函数来变异。减压器纯粹是功能性的，与组件分开实现。这可以更好地将问题与测试分开。

如果你在做一个简单的项目，引入Redux可能得不偿失，但对于中大型项目来说是一个不错的选择。

角度文字

TypeScript是一种基于JavaScript并由微软开发的新语言。它是JavaScript ES2015的超集，包含该语言较新版本的功能。你可以用它代替Babel来编写最高级的JavaScript。它还可以通过使用注释和类型推断的组合来静态分析您的代码。

还有一个更微妙的好处。TypeScript受Java和。NET，所以如果您的开发人员对其中一种语言有背景知识，他们可能会发现TypeScript比简单的JavaScript更容易(请注意我们如何从工具切换到您的个人环境)。虽然Angular是第一个主动采用TypeScript的主要框架，但它也可以与React一起使用。

RxJS

rjs是一个响应性很强的编程库，可以灵活处理异步操作和事件。它是观察者和迭代器模式以及函数式编程的结合。RxJS允许您将任何东西视为一个连续的流，并对其执行各种操作，例如映射、过滤、拆分或合并。

Angular已经使用了这个类库及其HTTP模块和一些内部用途。当您执行一个HTTP请求时，它会返回一个可观察的，而不是通常的承诺。这个类库虽然很强大，但是也很复杂。要掌握它，你需要知道不同类型的“可观察”、“主题”以及大约100种方法和操作符。

当您大量处理连续数据流(如Web套接字)时，rjs非常有用，但对于其他任何事情来说，它似乎都太复杂了。反正你用Angular的时候，至少应该知道RxJS的基础知识。

TypeScript可以说是Angular中一个非常重要的特性。首先，它给了原来的C#/Java开发者一个轻松进入前端的机会。此外，TypeScript还希望比JavaScript更容易理解，尤其是在代码或业务复杂的项目中。

生态系统

开源框架如此受欢迎的原因之一是，它们周围有无数的工具、类库和扩展来支持整个框架。有时候，这些工具可能比框架本身更有帮助。接下来，让我们看看与这两个框架相关的最流行的工具和类库。

角度角度

现代框架的流行趋势是使用命令行界面工具，这可以帮助您指导项目，而无需自己配置和构建。Angular有一个Angular CLI。它允许您只使用几个命令来构建和运行项目。所有负责构建应用程序、启动开发服务器和运行测试的脚本都隐藏在node_modules中。您也可以在开发过程中使用它来生成新代码。这使得建立新项目变得容易。

离子2

ion 2是开发混合移动应用的流行框架的新版本。它提供了一个与Angular 2完美集成的Cordova容器和一个漂亮的材料组件库。有了它，您可以轻松设置和构建移动应用程序。如果你喜欢使用混合应用，那么这是一个不错的选择。

材料设计组件

如果你热衷于设计材料，你会很高兴听到Angular有一个材料组件库。

角度通用

Angular universal是一个种子项目，可用于创建支持服务器端渲染的项目。

@ngrx/store

@ngrx/store是一个受Redux启发的Angular状态管理库，基于纯Redux变异的状态。它与RxJS的集成使您能够通过推送更改检测策略获得更好的性能。

有关Angular相关类库和工具的更多信息，请参考：Awesome Angular列表

反应创建反应应用

创建-反应-应用程序是一个命令行界面工具，用于快速创建新的反应应用程序。您可以生成新项目，启动开发服务器，并创建绑定。Jest(来自脸书的一个单元测试工具)也集成在Create-react-app中，这让我们更容易进行单元测试。

原生反应

React Native是脸书基于React开发的移动开发平台。有了这个平台，React可以创建真正的原生UI。提供了一系列标准反应组件进行绑定。同时，它允许您创建自己的组件，并将它们绑定到Objective-C、Java或Swift的代码。

材料用户界面

还有一个材料设计组件可用于反应。与Angular版本相比，这个版本更加成熟，可以使用更广泛的组件。

Next.js

Next.js是React应用程序的服务器端呈现框架。它提供了一种灵活的方法，可以在服务器上完全或部分呈现应用程序，将结果返回给客户端，并在浏览器中继续。它试图使创建通用应用程序的复杂任务尽可能简单，因此设置被设计得尽可能简单，对项目结构的新原语和要求最少。

MobX

MobX是管理应用程序状态的替代库。与Redux不同，Redux将状态保存在不可变的存储中，它鼓励您只存储最小的必要状态，并从中获取其余的数据。它提供了一组装饰器来定义观察器和观察者，并将反应逻辑引入到您的状态管理代码中。

小说

故事书是React的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。此外，它还提供了许多额外的组件来记录、开发、测试和设计您的组件。

同样，您可以从Awesome React列表中了解更多关于工具和类库的信息。

学习曲线和发展经验

选择一项新技术的一个重要标准是它是否容易学习。当然，答案取决于广泛的因素，例如您以前的经验以及对相关概念和模式的一般理解。如果我们假设您已经了解了ES6、构建工具和所有这些，那么让我们看看您还需要了解什么。

反应

有了React，你会遇到的第一件事就是JSX。对于一些开发者来说，刚开始似乎有些尴尬，但并没有增加复杂度；它只是一个表达式，实际上是JavaScript，还有一种像HTML一样的特殊语法。你还需要学习如何编写组件，使用道具来配置和管理内部状态。不需要学习任何新的逻辑结构或者循环，因为这些都是纯JavaScript。

官方教程是开始学习React的好地方。正式教程完成后，您应该熟悉并掌握React的路由机制。React Router v4的版本可能略显复杂和非常规，但不要太担心。

使用Redux需要范式转换，免费的Redux入门视频课程可以快速介绍核心概念。根据项目的规模和复杂性寻找和学习一些额外的库可能是一个棘手的部分，但之后，一切都应该会顺利进行。

事实上，开始使用React非常容易，最难的部分可能是如何选择适合您的项目或产品的类库。

有角的

Angular将向您介绍比React更多的新概念。首先，您需要使用TypeScript。对于有静态类型语言(如Java或)经验的开发人员来说，这可能比JavaScript更容易理解。但是对于纯JavaScript开发人员来说，这可能需要一些额外的学习。

框架本身丰富的技术主题可以从模块、依赖注入、装饰器、组件、服务、管道、模板和指令等基础开始，到变更检测、区域、AoT编译和RxJS等更高级的主题。这些都在文档中。RxJS是一个很重要的话题，官网有详细的描述。虽然它在基本功能级别上相对容易使用，但当转移到高级应用程序时，它会变得更加复杂。

总之，我们注意到Angular的进入壁垒高于React。新概念的数量肯定会让新来者感到困惑。当你遇到一些问题时，你必须用谷歌来找到答案。不过，正如我之前所说，是否合适取决于更多因素。

前景看好

2017年3月，Angular发布了4.0版本(兼容2.x版本)。官方的解释是，主要核心组件Router的版本已经是4.0.0了。如果Angular还是用3.0，会造成混乱，如下图：

在4.0版本中，代码量大大减少(60%)，加载速度提高(目测的程度)，错误信息更加清晰。根据官方文件，Angular版本升级将以相对较快的速度迭代

无论是大版本六个月的迭代，还是每周的修复，都可以看出Angular团队想要以快速升级的策略快速占领市场。

反应

另一方面，React的升级非常谨慎，从v15.5.0的最新新闻博客可以看出

但是从博客中我们可以看到React即将来到v16，不知道整个重写后的React会给我们带来什么惊喜。不过需要提到的是，脸书在去年年底发布了React VR。感兴趣的同学可以看下面。

适合度

不管哪个框架适合你，都是“好”的，所以你需要从项目(产品)本身的角度去衡量。下面列出的问题可能不全面，但至少可以作为一个开始

项目(产品)有多大？会维持多久？所有功能是提前明确定义还是灵活变更？领域模型和业务逻辑复杂吗？你在哪个站台？Web、手机、桌面？需要服务器端渲染吗？SEO重要吗？您是否处理许多实时事件流？你的团队有多大？你的开发者有多有钱，他们的背景是什么？有什么现成的组件库要用吗？

如果您正在从事一个大型项目，并且希望将错误选择的风险降至最低，请考虑创建一个演示来验证产品概念。选择项目的一些主要功能，并尝试使用其中一个框架以简单的方式实现它们。演示通常不会(也不应该)花费很多时间，但它会提供一些宝贵的经验来帮助您验证关键的技术要求。如果对结果满意，可以继续全面打造。如果没有，会给你充足的时间重新选择。在项目开发过程中，还可以使用一些支持Angular和React的开发工具来提高开发效率，比如Wijmo，它是一系列开发控件集，包括HTML5和JavaScript，用于企业应用程序开发。无论您的应用是移动、PC还是必须支持IE6，Wijmo Enterprise都能满足需求。

让我们来看看一位资深程序员对这两个框架的比较和体会：

首先，我目前的经验是，Angular和Ember都只玩过TODOMVC的教程，如果他们React的话，他们在写一个Chrome App和公司的一个小项目。

最近，一个新的项目碰巧正在评估是使用Angular，Ember还是React(通量)。我想谈谈我的拙见。

Angular.js

首先Angular的背后是谷歌(这是官网被封杀的原因吗？)，所以不用担心社区基础，整个生态已经很完整了。从最基础的Tutorial到StackOverflow再到框架本身的分析，问题非常非常多，所以从这个角度来看，Angular应该算是比较容易上手的。

然而，Angular目前的问题似乎也很明显

1.表演

它也是TODOMVC的样本，Angular需要1.1s(网页测试-视觉比较)才能满载。目前我用的基于Angular的是Kibana，真的很慢。

2.角度2.0

Angular 2.0几乎是一个推翻重做的框架，估计不会有1.x的升级方案，所以现在启动的新项目如果采用Angular，那会是一个尴尬的时刻。同样，如此大的变化似乎证明了1。x不太好。这篇文章建议去看看为什么你不应该使用

AngularJs

React.js

“反应”的最大特点是“轻”。此外，VDOM是一个好主意，这使得React非常非常快(在上面的测试中，它将被加载大约0.3s)。另外，React和Angular的一大区别是React采用单向数据流。

React的缺点是现在太新了。很难说未来会不会有什么大的API变化。目前在大型稳定项目中使用React时，我只知道有雅虎的Email。因此，批评React的声音很少。也许不是他真的没有坑，而是那些坑没有被踩出来。

同样，React本身只是一个v，所以如果一个大型项目想要一个完整的框架，它可能需要引入一些与Flux和路由相关的东西。我没有研究过React的路由，但是对Flux的话有一些批评。

摘要

Angular是一个真正的大而全面的框架，它有自己的一套思路。基本上，您可以遵循这个想法并填写代码。React是一个简短而强大的库，只负责解决单一的“痛点”。