Angular vs React 最全面深入对比

Posted 2022-12-20

如今，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/MicheleBertoli/css-in-js​​）
• 更强大的单元测试（​​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通常不会（也不应该）花费很多时间，但会提供一些宝贵的经验，可以帮助您验证关键的技术要求。如果对结果感到满意，可以继续全面构建。如果没有，会给你充分的时间重新选择。

 

总结

通过以上的6个方面对比了React和Angular这两个目前最热的前端框架，希望能对你在选择时提供一些参考。但是否真的是合适自己的，或许真的需要用过才知道