作为主流前端框架React和Angular，本文将从技术角度对比两者开发及学习成本，相较而言，哪种更高效呢？
作者
StefanKatic
译者
王丰力
责编
屠敏
出品
CSDN（ID：CSDNNews）
我先声明一下：我是Angular的忠实粉丝。最近，我有机会使用React。最开始，我想：真好，现在所有人都在使用React，它一定很好用。但是，使用之后，它真的令我失望：使用React的成本太高。我之所以写这篇文章是因为React团队或者不知道，或者是故意隐瞒这一点。所以，我在这里做了一个二者使用成本的对比。
Angular更难掌握
首先，让我们先比较一下这二者提供哪些功能、哪一个更好：
因为这两者本身就是为用户界面而创建的，所以，它们能提供展示的功能，这丝毫不奇怪。我们重新审视一下它们对开发人员的影响：从上面的列表中可以看到，React只是比Angular性能好。除此之外，作为一个系统库，它缺少很多开发者需要的功能。下面，我将逐一进行介绍。
展示
Angular使用自定义指令（如if、ngFor、ngSwitch、用管道定义模板），React使用vanillaJS。有一些人认为大家就是因为vanillaJS才喜欢React。没错，但是ngIf、ngFor或ngSwitch是不是有那么神秘呢？如果你可以在JS中编写for循环，那么也就可以在Angular模板中编写for循环。在React中，有什么与管道对应的概念吗？在React中，开发者可以创建类似的东西，但那是一个组件。如果你不想引进一个全局的（全局的不好，对吧？）组件，开发者将不得不向所有的组件提供日期或货币格式，虽然不是所有的组件都需要这些功能。你这么做，也将违反DRY（不要重复自己）的原则。
我们都知道React使用JSX来创建视图。还有，在React中非常流行的样式库也是样式化组件。在一个文件中，包含三部分：
逻辑
标记
风格
为了在React中按照一些不成文的规则来创建样式，我们必须学习样式化组件。它们比较凌乱。开发者不能像CSS那样，针对部分类型进行覆盖。在样式化组件中，那是不行的。如果该样式是针对某个组件的，你需要在文件顶部编写这些迷你样式组件。一个文件最终可能包含十几个这样的组件。
在React中，还有其他的方法，比如使用SCSS。但是，这么做，开发者就不能使用CreateReactApp，而需要使用CreateReactAppRewired以及自己管理Webpack的配置。由于大多数IDE只能支持createreactApp，因此要使用CreateReactAppRewired，开发人员就没有办法方便地利用现有的开发工具。
在Angular中，开发者可以使用CSS或SCSS。而为了使用样式并保留已有的工具，在React中，开发者还必须至少再学习一个新库。
路由选择
每个应用程序都需要路由功能，对吗？Angular内置了强大的路由支持。
在React中，开发者有选择的自由。这意味着如果你想使用路由功能，你就必须至少学习一种。这里的问题在于人们会变换他们的工作团队，而不同的团队有不同的选择。开发人员变换团队之后，他们很可能需要在新的团队使用不同的路由。这样，它们就必须学习新的路由功能。同样值得一提的是，Angular的路由功能比目前任何React的路由功能更强大。
总之，学习Angular路由将允许开发人员能使用几乎所有的AngularApp，而在React中，人们则需要不断地学习。
HTTP客户端
Angular有自己的HTTP客户端。React则依赖开源社区库。问题在于，有一些库不支持服务器端渲染。这和路由一样，开发负责人和/或架构师根据个人的偏好选择了React之后，会给其他开发人员增加学习负担，给公司带来额外的开销。
表单
Angular的表单功能非常强大。虽然，当开发者希望验证结果不在表单中时，则需要将表单创建功能以服务的方式实现。但是，这并不是一个无法解决的问题。
在React中，用户可以自由地进行选择。比如可以使用VanillaJS并使用事件处理程序。我的第一反应是–“我们不是已经不用回调（callback）了吗？“，但是答案显然不是。如果应用需要大量的表单，那么有一些库可以使用，例如ReactFinalForm。但是，它有两个依赖项——FinalForm和React的包装器（wrapper）。还有，如果要使用计算表单字段，那么开发者需要ReactFinalFormCalculate，这同样也有两个依赖项。如果想要在表单中使用数组，那么开发者需要ReactFinalFormArrays，而它也包含两个依赖项。如果所有6个依赖项一起工作，那么用户就可以进行表单验证。当然开发者需要提前找到并熟悉相关的说明文档。
状态管理
不论是React还是Angular都没有内置的支持。React用Redux库，Angular用NGRX。这两者都需要花时间学习。但是，NGRX是一种标准做法，Redux有不同的中间件比如Thunk,Saga,Observable…可以实现。但每一个都需要花时间学习。
动画
Angular的动画模块很强大，但是也确实很难学。它把所有的CSS模板进行了抽象，人们可以用编程的方法操纵它。React使用开源社区支持的ReactCSSTransitonGroup。说实话，我并不了解它是否支持样式化组件。如果它是以CSS为基础的，那么React是比较容易的。
性能
在这一点上，React毫无疑问具有性能的优势。
工具
React有CreateReactApp，而Angular有AngularCLI。后者的学习难度比较大。当然也有其他的工具如create-react-app-rewired，使用这个工具，开发者可以操作配置文件。如果和服务器端展示进行结合，那么你需要花更多精力去学习。
标准
Angular有自己的一套标准。React则依赖开源社区，但是每一个社区有自己的规则。对于React来讲，这种自由的代价是显而易见的：当一个新的开发人员加入项目组后，他需要花更多的精力来熟悉和掌握不同的规则。所有的Angular项目都很类似，但是React的项目之间差别很大。就我自己的经历来讲，我只花了几天，就创建了一个Angular项目。但是我花了几个月的时间让熟悉了一个React项目。
还有，每一个React项目组都有自己的eslint规则。有的规则定义得太严格，让开发人员觉得很麻烦。比如，定义了变量但是不使用，应该是警告，不应该被认为是错误。
虚拟DOM
这一点被喜欢React的人当作它的新功能。开发者从来没有看过Angular的支持者把变化检测当作是一个新功能。这就像向对blockchain着魔的企业兜售blockchain一样。
这不是新功能，它只能优化展示的性能。所有，它应该在性能的范畴内，而不应该被认为是新功能。
不管怎样，我必须承认React支持虚拟DOM，但是Angular还没有。
服务器端展示
Angular具有平台服务器，这样更新一个Angular应用并使用服务器端展示是很自然的选择，而且在这方面有很好的文档说明。React则需要依赖于不同的支持库，比如