Angular vs React 最全面深刻对比

现在，Angular和React这两个JavaScript框架可谓红的发紫，同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题，本文或许没法告诉你哪一个框架更优秀，但尽可能从更多的角度去比较二者，尽量的为你在选择时提供更多的参考意见。

选择的方法

在选择以前，咱们尝试带着一些问题去审视你将要选择的框架（或者是任何工具），尝试用这些问题的答案来帮助咱们更加了解框架，也更加让选择变得更容易

框架自己的问题：

是否成熟？谁在背后支持呢？
具有的功能？
采用什么架构和模式？
生态系统是否丰富？
须要自我反思的问题：

我和个人团队可否轻松学习并掌握？
是否适合个人项目？
开发体验是否足够好？
严格说来，Angular和React的比较是不公平的，由于Angular是一个功能丰富的框架，而React是一个UI的组件库，因此咱们在接下来的分析中会将一些常常和React在一块儿使用的类库放在一块儿讨论。

OK，开始… …

成熟度

做为一名成熟的开发人员或者是可以决定架构及技术走向的人员，一项必备的技能就是可以在工做和项目中平衡成熟技术与最前沿框架之间的关系，既能保持人员及技术的前进，又能保证项目或产品的交付质量，因此，必须当心如下可能的风险：

该框架多是不稳定的。
主要的开发方（赞助方）可能会忽然的放弃。
若是你须要帮助，可能没有大型知识库或社区可用。
幸亏，不管是Angular仍是React，彷佛都不须要担忧以上的风险

React

React由Facebook开发和维护，用于本身的产品，包括Instagram和WhatsApp。如今已经有大约三年半的时间。 它也是GitHub 最受欢迎的项目之一。

Angular

Angular由Google进行维护，并用于Google 的Adwords 和Fiber项目。既然AdWords是Goolge重要的吸金利器，天然Angular不太可能忽然夭折。

功能

如前文提到的，Angular自己会比React自带不少的功能，固然，更丰富的功能对于一个框架来讲，是优势也有多是缺点。两个框架都具有一些相同的核心功能：组件化、数据绑定以及平台无关的Render机制。

Angular

Angular除了提供一些须要最新浏览器支持的功能外，同时提供如下标准功能：

依赖注入
模板
路由（@angular/router）
AJAX（@angular/http）
表单（@angular/forms）
组件化CSS封装
XSS保护
单元测试工具
功能丰富的好处就是你不须要额外费精力去挑选第三方的类库，然而，这也一样让你没得选择，即便你并不须要这些功能（最新发布的Angular4貌似已经意识到了这个问题）

React

相对Angular，React自己提供的功能就相对“简约“：

无依赖注入
使用JSX代替传统的HTML Templates
XSS保护
单元测试工具
相对Angular，React让你有很大的自由度去挑选第三方的类库，好比：

路由（React-router）
AJAX（Fetch or axios）
各类CSS封装（详见：https://github.com/MicheleBer...）
更强大的单元测试（Enzyme）
能够根据本身的需求很自由（或者定制）须要的类库，同时这些第三方的类库都是很容易学习的。

语言与模式

随着两个框架的流行，一些概念和技术也随着浮出，若是想真正的用好或者说掌握这两个框架，了解随之而出的这些概念或者技术是很是必要的：

React

JSX

JSX是一个颇有争议的话题：有些人喜欢它，而其余人认为这是一个很大的退步。React决定使用一种相似XML的语言在组件中把标记和代码结合起来，直接在JavaScript代码中编写HTML标记。

尽管混合标记与JavaScript的话题多是有争议的，但它具备无可争议的优势：静态分析。若是在JSX标记中发生错误，编译器会当即报错而不是留待运行时出现莫名其妙的问题。这有助于开发人员快速排查错误以及避免其它愚蠢的错误，好比拼写错误。

Flow

Flow是由Facebook开发的JavaScript类型检查工具。它能够解析代码并检查常见的类型错误，如隐式转换或取消引用。

与相似目的的TypeScript不一样，它不须要开发人员迁移到新语言，并为你的代码注释类型检查工做。在流程中，类型注释是可选的，可用于向分析器提供其余提示。若是你想使用静态代码分析，同时避免重写现有的代码，Flow是一个很好的选择。

Redux

Redux是一个能够以清晰的方式管理状态变化的库。它的灵感来自Flux，可是有一些简化。Redux的关键思想在于，应用程序的整个状态由单个对象表示，该对象由名为reducers的函数进行突变。Reducers自己是纯功能，与组件分开实现。这样能够更好地分离问题和测试。

若是你正在开展一个简单的项目，那么引入Redux可能有点得不偿失，但对于中等和大型项目来讲，这是一个很好的选择。

Angular

TypeScript

TypeScript是一种基于JavaScript开发并由Microsoft开发的新语言。它是JavaScript ES2015的超集，并包含较新版本的语言的功能。你可使用它而不是Babel来编写最早进的JavaScript。它还能够经过使用注释和类型推断的组合来静态分析你的代码。

还有一个更微妙的好处。TypeScript受到Java和.NET的严重影响，因此若是你的开发人员有这些语言之一的背景知识，他们可能会比简单的JavaScript更容易找到TypeScript（请注意咱们如何从工具切换到你的我的环境）。 虽然Angular是第一个积极采用TypeScript的主要框架，但它也能够与React一块儿使用。

RxJS

RxJS是一个响应式编程库，能够灵活地处理异步操做和事件。它是将Observer和Iterator模式与功能编程相结合的组合。RxJS容许您将任何东西视为连续的流，并对其进行各类操做，例如映射，过滤，拆分或合并。

该类库已被Angular采用其HTTP模块以及一些内部使用。当您执行HTTP请求时，它返回一个Observable，而不是一般的Promise。 虽然这个类库很是强大，但也很复杂。要掌握它，您将须要了解不一样类型的“可观察”，“主题”以及大约一百种方法和操做符 。

当您使用连续数据流（如Web套接字）工做不少的状况下，RxJS很是有用，可是对于其余任何东西来讲彷佛过于复杂。 不管如何，当你使用Angular时，您至少应该了解RxJS的基本知识。

TypeScript能够说是Angular中很是重要的特色，首先他给本来C#/Java开发人员提供了很容易进入前端的机会，另外TypeScript也想比JavaScript更容易理解，尤为是代码量或者业务复杂的项目中。

生态系统

开源框架这么流行的缘由之一，就是围绕着他们，会有无数的工具、类库、扩展来支撑整个框架，有时，这些工具可能比框架自己更有帮助，接下来咱们就来看看相关这两个框架最流行的工具和类库。

Angular

Angular CLI

现代框架的流行趋势是使用CLI工具，能够帮助您引导项目，而无需自行配置构建。Angular有Angular CLI。它容许您仅使用几个命令来生成和运行项目。负责构建应用程序的全部脚本，启动开发服务器和运行测试都会在node_modules中隐藏。您也能够在开发过程当中使用它来生成新的代码。这使得新项目的设置变得垂手可得。

Ionic 2

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

Material design components

若是您热衷于设计Material，您会很高兴听到Angular有一个Material组件库。

Angular universal

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

@ngrx/store

@ngrx/store是由Redux启发的Angular的状态管理库，基于由pure reducer进行突变的状态。它与RxJS的集成容许您利用推送更改检测策略得到更好的性能。

关于更多的有关Angular相关类库和工具能够参考：the Awesome Angular list

React

Create React App

Create-react-app 是一个CLI工具，用于快速建立新的React应用。能够生成一个新的工程，启动开发服务器并建立绑定。Jest（来自Facebook的一个单元测试工具）也同时集成在Create-react-app内部，更方便的让咱们进行单元测试。

React Native

React Native 是Facebook开发的基于React在移动端的开发平台，借助此平台，React能够建立真正的Native的UI。提供了一系列标准的React组件用于绑定。同时容许建立本身的组件并与Objective-C、Java或者Swift的代码进行绑定。

Material UI

还有一个可用于React的Material Design Component。与Angular的版本相比，这个版本比较成熟，可使用更普遍的组件。

Next.js

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

MobX

MobX 是用于管理应用程序状态的替代库。不像Redux那样将状态保存在一个不可变的存储中，它鼓励您仅存储最低限度的必需状态，并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者，并将反应逻辑引入到你的状态管理代码中。

Storybook

Storybook是React的组件开发环境。它容许您快速设置单独的应用程序来显示您的组件。除此以外，它提供了许多附加组件来记录，开发，测试和设计您的组件。

一样的，能够从Awesome React list了解更多的工具和类库。

学习曲线与开发体验

选择新技术的一个重要标准是学习它是否容易。固然，答案取决于普遍的因素，例如您之前的经验和对相关概念和模式的广泛了解。若是咱们假设你已经知道ES6 +，构建工具和全部这些，咱们来看看你还须要了解什么。

React

有了React，你会遇到的第一件事就是JSX。对于一些开发人员来讲彷佛刚开始会以为很别扭，但它并无增长复杂性; 只是表达式，实际上仍是JavaScript，还有一个特殊的相似HTML的语法。您还须要学习如何编写组件，使用props进行配置和管理内部状态。不须要学习任何新的逻辑结构或循环，由于全部这些都是纯JavaScript。

官方教程是开始学习React的好地方。一旦完成了官方教程，接下来应该熟悉并掌握React的路由机制 。React Router v4版本可能稍微复杂和很是规，但也不准太过担忧。

使用Redux将须要一个范式的转变，免费入门Redux视频课程能够快速介绍核心概念。根据项目的大小和复杂性，找到并学习一些额外的库，这多是棘手的一部分，但以后，一切都应该变得顺利。

其实，React的上手很是容易，最难的部分多是如何挑选合适你项目或产品的类库。

Angular

Angular将向您介绍比React更多的新概念。首先，您须要使用TypeScript。对于具备静态类型语言（如Java或.NET）经验的开发人员，这可能比JavaScript更容易理解，但对于纯JavaScript开发人员，这可能须要一些额外的学习。

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

总而言之，咱们注意到Angular的进入壁垒高于React。新概念的数量绝对令新来者感到困惑。又是碰到一些问题还不得不Google后才能找到答案，可是，就像以前说的，是否合适，仍是取决于更多的因素。

前景

Angular

就在2017年的3月，Angular已经发布了4.0的版本（兼容2.x版本），关于为何是4.0，官方的解释是由于Router这个主要核心组件的版本已是4.0.0，若是Angular还用3.0会引发混淆，以下图：

4.0版本中主要是大幅度的减少了代码体积（60%），同时提升了加载的速度（肉眼可查的程度），同时报错的信息更清晰了。根据官方的文档，Angular的版本升级会以比较快的速度进行迭代

不管是大版本的6个月迭代，仍是每周的hotfix，能看出Angular团队想用快速升级的策略迅速占领市场。

React

反观React的升级却是很是谨慎的，这从最新的v15.5.0的发布新闻博客中就能看出

不过，从博客中能看到React即将迎来v16，不知道整个重写的React会给咱们带来什么惊喜。不过，须要提一下的是Facebook已经与去年末的时候发布了React VR，有兴趣的同窗能够围观如下。

契合度

不管是哪一个框架，适合本身的才是“好“的，因此须要你从项目（产品）自己的角度去衡量，如下的问题列表可能并不全面，但至少能够做为一个开始

该项目（产品）有多大规模？
要维护多久？
全部的功能是提早清楚地定义仍是灵活的改变？
域模型和业务逻辑是否复杂？
你定位什么平台？ Web，手机，桌面？
你须要服务器端渲染吗？ SEO重要吗？
你会处理不少实时事件流？
你的团队有多大？
你的开发人员有多丰富，他们的背景是什么？
是否有任何您想要使用的现成的组件库？
若是您正在开展一个大型项目，并但愿尽量减小错误选择的风险，请考虑先建立一个demo用于验证产品概念。选择项目的一些主要功能，并尝试使用其中一个框架以简单的方式实现它们。 Demo一般不会（也不该该）花费不少时间，但会提供一些宝贵的经验，能够帮助您验证关键的技术要求。若是对结果感到满意，能够继续全面构建。若是没有，会给你充分的时间从新选择。在项目发开过程当中，你还能够借助一些支持Angular和React的开发工具来提升开发效率，如Wijmo，这是一款为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。不管你的应用程序是移动端、PC端、仍是必需要支持IE6，Wijmo Enterprise 均能知足需求。

总结

经过以上的6个方面对比了React和Angular这两个目前最热的前端框架，但愿能对你在选择时提供一些参考。可是否真的是合适本身的，或许真的须要用过才知道 ? Good luck~~~

原文连接：https://www.sitepoint.com/rea...

转载请注明出自：葡萄城控件