react不同环境不同配置angular_React vs. Angular比较：哪一个更适合您的项目？

试图在世界前端开发中的这两个强者之间做出决定？请继续阅读，进行深入的比较分析。

在编程领域，Angular和React是前端开发人员最流行的JavaScript框架之一。此外，这两个 - 与Node.js一起 - 使其成为所有软件工程师在所有编程语言中使用的前三个框架，根据 Stack Overflow Developer Survey 2018。

这两个前端框架都非常流行，具有相似的架构，并且基于JavaScript。那有什么区别？在本文中，我们将比较React和Angular。让我们首先看一下下一段中框架的一般特征。如果您正在寻找其他React和Angular比较，您可以查看我们关于 跨平台移动框架 (包括React Native)的文章，或者 Angular与其他前端框架的比较。

Angular和React.js：简要说明

Angular 是一个由Google提供支持的前端框架，与大多数常用代码编辑器兼容。它是MEAN堆栈的一部分， MEAN堆栈是一个免费的开源JavaScript中心工具集，用于构建动态网站和Web应用程序。它由以下组件组成：MongoDB(NoSQL数据库)，Express.js(Web应用程序框架)，Angular或AngularJS(前端框架)和Node.js(服务器平台)。

Angular框架允许开发人员创建动态的单页Web应用程序(SPA)。当Angular首次发布时，它的主要好处是能够将基于HTML的文档转换为动态内容。在本文中，我们将重点放在较新版本的Angular上，通常称为Angular 2+，以解决它与AngularJS的区别。Angular被Forbes，WhatsApp，Instagram，healthcare.gov，HBO，Nike等使用。

React.js 是一个由Facebook在2011年创建的用于构建动态用户界面的开源JavaScript库。React基于JavaScript和 JSX，这是由Facebook开发的PHP扩展，允许为前端开发创建可重用的HTML元素。React拥有React Native，一个用于移动开发的独立跨平台框架。我们在上面链接的相关文章中提供了对React.js和React Native的深入评论。React由Netflix，PayPal，Uber，Twitter，Udemy，Reddit，Airbnb，Walmart等使用。

工具集：框架与库

框架生态系统定义了工程体验的无缝性。在这里，我们将看看Angular和React常用的主要工具。首先，React不是一个真正的框架，它是一个库。它需要与其他工具和库进行多次集成。使用Angular，您已经拥有了开始构建应用程序的一切。

Angular

Angular提供了许多开箱即用的功能：

RxJS 是一个异步编程库，通过设置多个数据交换通道来减少资源消耗。RxJS的主要优点是它允许独立地同时处理事件。但问题是，虽然RxJS可以与许多框架一起运行，但您必须学习库以充分利用Angular。Angular CLI 是一个功能强大的命令行界面，可帮助创建应用程序，添加文件，测试，调试和部署。依赖注入 - 框架将组件与依赖关系分离，以并行运行它们并在不重新配置组件的情况下更改依赖关系。Ivy渲染器 - Ivy是新一代Angular渲染引擎，可显着提升性能。Angular Universal 是一种用于服务器端呈现的技术，它允许快速呈现第一个应用页面或在可能缺乏浏览器端呈现资源的设备上显示应用程序，如移动设备。Aptana， WebStorm， Sublime Text， Visual Studio Code 是Angular常用的代码编辑器。Jasmine， Karma和 Protractor 是在浏览器中进行端到端测试和调试的工具。React

React需要多个集成和支持工具才能运行。

Redux 是一个状态容器，它可以加速React在大型应用程序中的工作。它管理具有许多动态元素的应用程序中的组件，并且还用于呈现。此外，React使用更广泛的Redux工具集，其中包括 Reselect，Redux的选择器库和 Redux DevTools Profiler监视器。Babel 是一个转换编译器，它将JSX转换为JavaScript，以便浏览器理解应用程序。Webpack - 由于所有组件都是用不同的文件编写的，因此需要将它们捆绑在一起以便更好地进行管理。Webpack被认为是标准的代码捆绑器。React Router - 路由器是一个常用于React的标准URL路由库。与Angular类似，您在代码选择方面不受限制。最常见的编辑器是Visual Studio Code， Atom和Sublime Text。与Angular不同，在React中，您无法使用单个工具测试整个应用程序。您必须使用单独的工具进行不同类型的测试。React与以下工具兼容：Enzyme 和 Unexpected-react - 用于组件测试。Jest - 用于JavaScript代码。react-testing-library - 用于React DOM测试。React-unit - 用于单元测试。Skin-deep - 用于渲染测试工具。此工具集还由Reselect DevTools提供，用于调试和可视化以及针对Chrome React Developer Tools的 React Extension 和 针对Firefox和 React Sight的React Developer Tools ，可视化状态和prop树。

通常，这两种工具都具有强大的生态系统，用户可以决定哪种更好。虽然React通常更容易掌握，但它需要像Redux这样的多个集成来充分利用其容量。

基于组件的体系结构：使用这两种工具的可重用和可维护组件

两个框架都具有基于组件的体系结构。这意味着应用程序由模块化，内聚和可重用组件组成，这些组件组合在一起构建用户界面。基于组件的体系结构被认为比Web开发中使用的其他体系结构更易于维护。它通过创建单独的组件来加速开发，使开发人员能够以较低的上市时间调整和扩展应用程序。

代码：TypeScript与JavaScript和JSX

Angular使用TypeScript语言(但如果需要，您也可以使用JavaScript)。TypeScript是适合大型项目的JavaScript的超集。它更紧凑，可以识别打字错误。TypeScript的其他优点包括更好的导航，自动完成和更快的 代码重构。TypeScript更紧凑，可扩展，更干净，非常适合企业规模的大型项目。

React使用JavaScript ES6 +和JSX脚本。JSX是JavaScript的语法扩展，用于简化UI编码，使JavaScript代码看起来像HTML。JSX的使用在视觉上简化了代码，允许检测错误并保护代码免受注入。JSX还用于通过Babel进行浏览器编译， Babel是一种将代码转换为Web浏览器可以读取的格式的编译器。JSX语法执行与TypeScript几乎相同的功能，但是一些开发人员发现它太复杂而无法学习。

DOM：真实与虚拟

文档对象模型(DOM)是HTML，XHTML或XML文档的编程接口，以树的形式组织，使脚本能够动态地与Web文档的内容和结构交互并更新它们。

DOM有两种类型：虚拟和真实。传统或 真实DOM更新整个树结构，即使更改发生在一个元素中，而 虚拟DOM 是映射到真实DOM的表示，该DOM跟踪更改并仅更新特定元素而不影响整个树的其他部分。

React使用虚拟DOM，而Angular在真实DOM上运行，并使用变化检测来查找哪些组件需要更新。

虽然虚拟DOM被认为比真正的DOM操作更快，但Angular中当前的变化检测实现使两种方法 在性能方面相当。

数据绑定：双向与向下(单向)

数据绑定是在模型(业务逻辑)和视图(UI)之间同步数据的过程。数据绑定有两种基本实现：单向和双向。单向和双向数据绑定之间的区别在于模型视图更新的过程。

单向和双向数据绑定

Angular中的双向数据绑定类似于 模型 - 视图 - 控制器 体系结构，其中模型和视图是同步的，因此更改数据会影响视图，更改视图会触发数据中的更改。

React使用单向或向下数据绑定。单向数据流不允许子元素在更新时影响父元素，从而确保只有已批准的组件才会更改。这种类型的数据绑定使代码更稳定，但需要额外的工作来同步模型和视图。此外，在子组件的更改触发的父组件中配置更新需要更多时间。

React中的单向数据绑定通常更具可预测性，使代码更稳定，调试更容易。但是，Angular中的传统双向数据绑定更易于使用。

应用程序大小和性能：Angular有一个轻微的优势

AngularJS以处理复杂和动态应用程序时的低性能而闻名。由于虚拟DOM，React应用程序的执行速度比相同大小的AngularJS应用程序快。

然而，根据Jacek Schae在freeCodeCamp.org上的研究，与React和Redux相比，较新版本的Angular略 快一些。此外，在同一研究中，与React与Redux相比，Angular的应用程序大小更小。它的传输大小为129 KB，而React + Redux为193 KB。

最近对Angular的更新使得两者之间的竞争更加激烈，因为Angular在速度或应用程序大小方面不再落空。

预构建的UI设计元素：Angular Material与社区支持的组件

Angular：Material Design语言在Web应用程序中越来越流行。因此，一些工程师可以从开箱即用的材料工具集中受益。Angular拥有预先构建的材料设计组件。 Angular Material 有一系列实现常见交互模式：表单控件，导航，布局，按钮和指示器，弹出窗口和模块以及数据表。预构建元素的存在使得配置UI的速度更快。

React：另一方面，React的大多数UI工具都来自其社区。目前， React门户网站上的 UI组件部分提供了大量免费组件和一些付费组件。使用React的材料设计需要更多的努力：您必须安装Material-UI库和依赖项来构建它。此外，您还可以检查 使用React构建的Bootstrap组件以及包含UI组件和工具集的其他软件包 。

移动可移植性：NativeScript与React Native

这两个框架都附带了其他工具，允许工程师将现有的Web应用程序移植到移动应用程序中。我们提供了对NativeScript(Angular)和React Native的深入分析和比较 。让我们简要回顾一下要点。

NativeScript。 NativeScript 是一个跨平台的移动框架，它使用TypeScript作为核心语言。用户界面使用XML和CSS构建。该工具允许在iOS和Android上共享大约90％的代码，从Web应用程序移植业务逻辑并在使用UI时使用相同的技能集。NativeScript背后的理念是为移动设备编写单个UI，并根据需要为每个平台稍微调整一下。与使用WebView呈现的混合跨平台解决方案不同，该框架在JavaScript虚拟机中运行应用程序，并直接连接到本机移动API，从而保证与本机应用程序相媲美的高性能。

反应原生。JavaScript框架是针对移动应用程序的跨平台实现，还支持从Web进行移植。 与NativeScript相比，React Native采用了略微不同的方法：鼓励RN的社区为不同的平台编写单独的UI，并坚持“一次学习，随处写”的方法。因此，代码共享的估计值约为70％。React Native还拥有像NativeScript一样的原生API渲染，但需要构建额外的桥API层来连接JavaScript运行时与本机控制器。

通常，如果您需要使用相同的业务逻辑运行Web和移动应用程序，这两个框架都是一个很好的选择。虽然NativeScript更专注于代码共享并缩短产品上市时间，但React Native背后的理念提出了更长的开发术语，但最终更接近原生外观。

文档和供应商支持：大型社区的文档抵消不足

Angular由Google创建，该公司不断开发Angular生态系统。自2018年1月以来，Google为该框架提供了LTS(长期支持)，专注于修复错误和积极改进。尽管框架发展很快，但文档更新并不是那么快。为了使Angular开发人员的生活更轻松，我们提供了一个 交互式服务 ，允许您定义框架的当前版本和更新目标，以获取更新活动的清单。

遗憾的是，该服务无法将传统的AngularJS应用程序转换 为Angular 2+， 因为没有简单的方法可以做到这一点

AngularJS文档 和教程仍然受到开发人员的称赞，因为它们提供的范围比Angular 2+更广泛。考虑到AngularJS已经过时，这几乎不是一个好处。一些开发人员还对SLI文档更新的速度表示担忧。

React社区正在遇到类似的文档问题。在使用React时，您必须为变化和不断学习做好准备。React环境及其运行方式经常更新。React有 一些最新版本的文档，但是跟上所有更改和集成并不是一项简单的任务。但是，社区支持在某种程度上抵消了这个问题。React拥有大量开发人员，可以在专题论坛上分享他们的知识。

学习曲线：Angular更加陡峭

Angular的学习曲线被认为比React更陡峭。Angular是一个复杂而冗长的框架，有许多方法可以解决单个问题。它具有复杂的组件管理，需要许多重复的操作。

正如我们上面提到的，框架一直在不断发展，因此工程师必须适应这些变化。Angular 2+版本的另一个问题是使用TypeScript和RxJS。虽然TypeScript接近JavaScript，但仍需要一些时间来学习。RxJS还需要付出很多努力才能完成。

虽然React也需要不断学习，因为频繁更新，对新手来说通常更友好，如果你已经擅长使用JavaScript，也不需要太多时间学习。目前，React的主要学习曲线问题是Redux库。使用React构建的应用程序中约有 60％ 使用它，最终学习Redux是React工程师的必备工具。此外，React还为初学者提供了有用且实用的 教程。

社区和接受：两者都被广泛使用和接受

React在GitHub上比Angular更受欢迎。它有113,719颗星和6,467个视图，而Angular只有41,978颗和3,267颗星和视图。但根据2018年Stack Overflow开发人员调查，使用Angular的开发人员数量略多：37.6％的用户，而React用户为28.3％。值得一提的是，该调查涵盖了AngularJS和Angular 2+工程师。

Angular得到了Google的积极支持。该公司不断开发Angular生态系统，自2018年1月起，它为LTS(长期支持)提供了框架。

然而，Angular也以负面方式领先。根据同一调查，45.6％的开发人员认为它是最可怕的框架之一。这种对Angular的负面反馈可能受到许多开发人员仍然使用AngularJS这一事实的影响，AngularJS比Angular 2+存在更多问题。但是，Angular的社区仍然更大。

React的数字更为乐观。只有30.6％的专业开发人员不想使用它。

您应该选择哪种框架？

Angular背后的基本理念是为整体前端开发体验提供强大的支持和工具集。谷歌的不断更新和积极支持暗示该框架不会随处可见，其背后的工程师将继续努力保护现有社区，并使开发人员和公司从AngularJS切换到具有高性能和更小应用的新Angular 2+大小。TypeScript增加了代码的可维护性，随着您到达企业级应用程序，这变得越来越重要。但这需要一个陡峭的学习曲线的价格和一群向React倾诉的开发人员。

React为开发人员提供了一种更轻量级的方法，可以在没有太多学习的情况下快速上班。虽然图书馆没有规定工具集和方法，但还有许多工具，如Redux，您必须另外学习。目前，React在性能方面与Angular相当。这些方面使得开发人员更具吸引力。