「前端架构」React,Angular还是Vue，太难选了？看完秒懂。

「前端架构」React,Angular还是Vue，太难选了？看完秒懂。

我们必须承认，我们在这些框架方面有着极不平等的经验。然而，我们将尽量保持公正，并弄清楚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

如果没有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确实需要一些努力才能掌握。

摘要

荣誉提及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开发人员。

谢谢大家关注，转发，点赞。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。