我们必须承认,我们在这些框架方面有着极不平等的经验。然而,我们将尽量保持公正,并弄清楚React何时可能不是最佳选择,但首先,简短介绍:
- React是Facebook维护的最流行的框架。所有的酷孩子,以及经验丰富的工程师都喜欢它。
- 我们有Angular感谢谷歌。它是企业中最古老、最著名的。
- Evan You从他以前在Google的工作经验中提取出他喜欢AngularJS的部分,从而创建了轻量级Vue。这是亚洲最流行的框架。
框架设计
Vue和Angular共享类似的设计,尽管Angular是一个复杂的平台,而不仅仅是一个小库。另一方面,React具有独特的设计,具有单向数据绑定和虚拟DOM。
React设计原则
React是基于可组合组件的思想构建的。它们是隔离的,在大多数情况下,只公开props 接口。它使团队协作更加容易,因为不同的人可以创建各种协同工作的组件。对组件进行更改也是一件轻而易举的事,而且这很少会导致整个代码库的更改链。
在React中,组件不会直接呈现给Dom。render方法返回需要呈现的内容的描述,React有一种快速而聪明的方法将其应用于DOM。
这个框架是关于组件层次结构的单向数据流。子组件不知道它们的父组件,只接收来自它们的props 。将函数作为属性传递是修改父组件状态的常见做法。它使得所有的东西都是松散耦合的、模块化的、快速的。
Angular 是为了企业
Angular更像是一个使用HTML和TypeScript构建应用程序的平台。它由不同的TypeScript库组成,可以导入到项目中,比如路由或ajax调用。
Angular应用程序总是有一个支持引导的根模块,通常有一堆特性模块。NgModules是将相关代码收集到功能组件中的基本构建块。
组件为屏幕元素定义视图,并使用与视图不直接相关的特定功能的服务。它利用依赖注入使所有东西松散耦合和模块化。
应用程序代码广泛地使用decorator为Angular提供额外的元数据。
对于视图,它有自己的模板语言,带有指令和绑定标记,可以根据数据动态呈现HTML。还有一个事件绑定可以让你的应用程序响应用户输入。与react不同,数据流是双向的。
Vue,两者兼而有之
Vue试图用最简单的API提供可组合视图组件和反应式(reactive )数据绑定的好处。Vue有一篇文章从其他框架的角度将其与其他框架进行了比较,值得一读,尤其是如果您已经熟悉其他两种框架之一的话。
Vue不是Angular那样的平台,而是像React一样的接口框架。与Angular一样,它支持双向数据绑定,但组件之间的单向父子数据流是默认设置。它还有一个独特的模板语言,并且不像React那样使用虚拟DOM。
Vue中的组件与Web组件规范中的自定义元素非常相似。他们故意按照规范对语法进行建模。但是,Vue组件在每个浏览器中都受支持,具有跨组件数据流、自定义事件通信和其他基本功能。
框架的优势
每个框架都有它最好的部分。React使开发变得轻而易举,Angular主要专注于企业,而Vue则是最轻量级的。
React优点
如果你问我们React最喜欢什么,那应该是JSX(TypeScript是TSX)。它是JavaScript的语法扩展,可以为组件编写类似HTML的呈现代码:
function Hello({ name }) { return <div>Hello {name}</div>; }
如果没有JSX,编写React代码会非常痛苦:
function Hello({ name }) { return React.createElement("div", null, `Hello ${name}`); }
上面的JSX在幕后被翻译成了非常相似的JavaScript。想象一下用它编写复杂的组件层次结构。你可以玩一下the online Babel compiler 来获得这个想法。
React团队非常关注API的稳定性。对于像Facebook、Twitter和Airbnb这样在生产中使用React的大公司来说,这一点至关重要。这些api与最初的版本相比没有太大变化。当他们决定删除某些内容时,他们首先将其标记为已弃用,这将触发linter和debug生成警告。
作为一个视图库,react通过互操作性得到了了巨大的好处。您可以快速将其放入现有项目中,并仅将其用于组件的一个子集。
对于性能,它使用“拉动”方法。与其他在新数据可用时执行计算的框架不同,React可以安排生命周期方法来延迟应用更改。
开发经验是React团队的首要任务。它们维护有用的React DevTools,并尝试使框架抛出的警告真正有用。
在React 16.8中引入React钩子使得几乎整个应用程序都可以使用短功能组件。函数式风格使代码更易于编写、阅读和理解。
除了HTML,React还支持Web组件和呈现SVG。它与渲染器无关,可以在浏览器内部工作,也可以在Node.js处理和输出HTML流,甚至在移动设备上使用React Native。
你可以在他们的“设计原则”(“Design Principles”)一文中了解更多关于它们的好处。
Angular 长处
作为一个平台,Angular的所有基础知识都是现成的。因此,应用程序通常具有更好的一致性、更高的代码质量和更高的安全性。您不必为常见任务处理不熟悉的第三方软件包。
默认情况下,Angular附带TypeScript。强类型语言有许多优点,比如出现错误的机会更少、工具更好、重构功能更强大以及总体上可维护性更好。我们也推荐它用于React项目。
与其他鼓励自由的框架不同,Angular通常有一种建议的做事方式。对于新开发人员来说,加入不熟悉的项目更为自然,因为每个应用程序的结构几乎都是一样的。它还使得维护大型代码库更便宜、更高效。
与其他框架中的组件类似,模块允许代码重用和由不同的人甚至团队进行并行开发。Angular社区还提供了带有可重用组件的预制模块。
Vue灵活性
轻量级和简单是Vue设计的核心原则之一。在所有三个框架中,它的包大小最小。Vue代码非常简单易懂。这可能是它受欢迎的主要原因。
与React一样,您可以轻松地将Vue添加到现有项目中,并开始将其用于某些部分。与React不同的是,Vue模板语法类似于HTML,因此转换现有代码更加方便。顺便说一下,它还支持JSX语法。
Vue的核心和最受欢迎的库都有公共CDN。您不必设置复杂的构建过程来使用它,添加头脚本(如jQuery)应该可以让您快速入门。
Vue覆盖了MVVM架构模式的ViewModel层。除了呈现HTML视图外,它还具有双向数据绑定,以使UI中的更改与数据同步,反之亦然。它比React的单向绑定直观得多,使它更容易在静态网站中添加动态功能。
它受到了另外两个框架的启发,并试图从这两个框架中获取最好的部分。组件来自React。指令以及双向数据绑定都是从Angular中借用的。它不仅仅是像React这样的UI库,也不是Angular这样的成熟平台。Vue拥有一个很好的平衡特性,这些特性都是现成的,而且没有固执己见,提供了广泛的选择自由。
每个框架的缺点
本文中涉及的所有框架都是健壮的,经过许多公司的生产测试,没有明显的缺点。但是,在为下一个项目选择框架时,需要记住一些事情。
React 缺点
React不喜欢第三方代码弄乱DOM。在React中提供具有根DOM元素的外部库很容易,并且只处理其生命周期。这就是流行的react-leaflet库如何用react接口包装纯JavaScript单张库。
单向的数据流是一个巨大的好处,在没有经验的人身上会造成很多伤害。清楚的理解是正确使用它的关键。我们认为React与其他框架有很大的不同,因此它需要自己的思考方式。
Angular 缺陷
Angular是一个复杂的平台,具有陡峭的学习曲线。应用程序代码冗长而复杂,这使得它不适合许多开发速度至关重要的敏捷项目。它是为企业级应用程序而创建的,因此可维护性是他们的首要任务。
包的大小通常比另外两个包大得多,尽管它取决于包含的库。再加上缺乏对服务器端渲染的支持,这使得Angular应用程序远不是SEO友好的。有点奇怪,考虑到它的创建者,谷歌是最大的搜索公司。
Angular的受欢迎程度正在慢慢下降,社区开始转向其他框架。许多开发人员认为这个已经有十年历史的框架是一种遗留技术,并且不愿意在基于它的项目上工作。
Vue缺点
Vue依赖于相当复杂的机制来实现其双向反应性(reactivity)。每个开发人员都应该意识到Vue无法检测到的这些情况:
- 对象的属性添加和删除
- 使用相应属性修改数组长度
- 按索引直接分配数组元素
JavaScript本身的局限性导致了这些问题,Vue团队对此无能为力。它们在反应性指南中有完整的记录。
作为最年轻的框架,Vue缺乏经验丰富的开发人员,学习资源有限。不过,生态系统本身相当广泛。
尽管它的受欢迎程度有一个强劲的上升趋势,但在撰写本文时,很少有大型项目是基于Vue构建的。对于应用程序的其余部分,没有多少最佳实践和经过验证的库。它引入了一些风险因素,在选择Vue进行更实质性的项目时需要考虑。
性能
所有的基准都来自Stefan Krause的综合JS框架基准测试。您可以检查每个框架测试的源代码,甚至可以在本地计算机上运行这些基准测试。所有的说明以及每个测试的详细解释都在存储库中。
Dom操作
DOM操作测试在应用程序完全加载和预热后测量UI性能。
我们这里没有明确的赢家。Vue可能会使用独特的性能优化来加快交换行的速度。另一方面,Angular和React在highlighting rows测试中的性能都要优于React。
启动时间
这些测试代表了Google在访问应用程序时推荐的高质量用户体验的“Web关键点”指标。
Vue凭借其轻量级的设计和最小的捆绑包大小击败了这里的所有人。React排在第二,只输了几分。角度,感谢它的束大小和复杂的引导是最后一个明显的区别。
内存分配
结果与启动时间试验有很强的相关性。Vue排在第一位,反应不远,Angular由于其大小和抽象性而占据了大部分内存。
人气
根据googletrends,React仍然是最流行的框架。它有一个活跃的社区和最广泛的第三方npm包集合。
然而,在他们的存储库获得的星数量上,Vue已经克服了这一点。
如果我们看看中国,情况就不同了。中国是Vue的发源地,在附近的亚洲国家也很受欢迎。由于防火墙的存在,中国开发者无法访问谷歌和其他框架上的大部分资源。语言障碍也起着重要作用。
学习曲线
Vue是最容易学的,不用担心。它的模板语法与plain html非常相似。您可以用HTML、Javascript或JSX编写模板。双向响应非常简单。i
整个框架很小,设计中融入了简洁性。
反应其次。JSX也类似于HTML,但有一些区别,比如类名和camelCase命名约定。单向数据流和不变状态是最难理解的部分。但一旦你得到它,其他一切都很容易。
Angular的学习曲线要陡得多,因为它是这三个框架中最复杂的。TypeScript和RxJS对于Angular开发是必需的,因此开发人员也必须了解它们。虽然TypeScript构建在JavaScript之上,而且非常容易学习,但RxJS确实需要一些努力才能掌握。
摘要
React | Angular | Vue | |
---|---|---|---|
Realease | 2013 | 2010 | 2014 |
Website | reactjs.org | angular.io | vuejs.org |
Current Version | 16.13.x | 10 | 2.6.x |
Used by | Facebook Instagram, Netflix, New York Times | Microsoft, Google, Apple, Paypal | Adobe, Buzzfeed, GitLab, Grammarly |
Bundle Size | 35 Kb | 500 Kb | 20 Kb |
Popularity | High | Moderate | High |
Watchers | 6.7k | 3.2k | 6.2k |
Stars | 152k | 63.1k | 168k |
Forks | 29.7k | 17.1k | 25.5k |
Contributors | 1,468 | 1,165 | 371 |
荣誉提及Preact
PPreact是一个快速的api兼容React的替代品,具有令人惊叹的3Kb包大小。
它与React基本上是生态系统兼容的,这意味着为React设计的第三方npm包中的组件也应该在Preact中工作。在关于从React切换的指南中,它们涵盖了许多常见的迁移问题。
作为最小的UI框架之一,它非常适合于可嵌入的小部件和其他代码,其中bundle的大小至关重要。拥有React经验的开发人员甚至不必牺牲生产力,因为它离它的老大哥太近了。
结论
对于一个新项目来说,这三个框架中的任何一个都不会完全出错。明智的做法是将你的决定主要建立在你的团队现有的专业知识之上。
- 当涉及到小部件和其他可嵌入的UI组件时,Preact是最好的。
- React是一个很好的全能者。由于单向数据流,应用程序的逻辑始终保持清晰。组件提供了高级别的代码重用和较低的更改成本。它对小项目没有问题,而且,当与TypeScript一起使用时,对于大中型项目也非常适用。
- 对于Web设计者来说,Vue是jQuery的最佳替代品。它的功能远不止于此,我们还建议将其用于除企业项目之外的任何项目。由于简单和高效,它对于MVP开发来说一定是很棒的,尽管我们还没有尝试过。
- 随着越来越多的公司迁移到Vue和React,Angular甚至在企业利基市场也失去了主导地位。现在我们不提倡从头开始学习,但是如果你有合理的理由,开始一个新的角度项目并不是一个大错误。然而,它的大量冗长对开发生产力有很大的伤害。
我们重视React设计决策的好处及其广泛的生态系统。我们对Vue没有太多的经验,但是如果它对项目更有意义的话,我们会考虑使用它。今天,我们不能向我们的客户推荐好的老Angular,因为它继续失去人气,我们担心很难很快找到好的Angular开发人员。