Angular与React差异比较：它们有什么区别？

Angular与React哪个更好？我们正生活在 Javascript 的年代，因为该语言在 Github 上迅速攀升至第一名，并且在不同的应用程序中不断获得动力，而不仅仅是前端应用程序开发。如今，Javascript 用于前端、后端、构建移动应用程序甚至构建 AI 应用程序。chrome V8 引擎正在推动其在服务器端的性能，就像它在浏览器上所做的那样。

一个不容忽视的麻烦是有太多的 Javascript 框架和库让你头疼，这将 Web 开发直接转变为火箭科学和弦理论。框架和库最初旨在通过利用其他专业开发人员创建的工具及其对常见问题的解决方案的强大功能来加速开发过程。因此，要以更有效的方式使用这些工具，我们必须了解它们的工作原理以及它们必须提供的功能，仅选择最适合我们的功能性和非功能性软件需求的工具。

Angular与React有什么区别？今天，我们将深入比较两种最流行的 Javascript “框架”，Angular 和 React，稍后你将看到为什么我们在两个引号之间加上框架这个词。

单页应用程序与多页应用：

应用程序开发正在从桌面转移到浏览器，因为它提供了更好的用户体验并且可以在许多设备上共享。在开发基于 Web 的应用程序时，有两种主要的范式或模式可供选择。

这两种模式是单页应用程序或简称 SPA，和多页应用程序 (MPA)。现在，这并不意味着你不能在同一个网站上同时拥有两者，事实上，在大多数情况下，你希望在两者之间混合你的页面以实现最佳用户体验，具体取决于具体情况。

SPA 是一种不需要重新加载的 SPA，这使得性能更流畅、更快，因为所有组件都被运送到客户端。Gmail 是 SPA 的一个很好的例子。SPA 独立请求应用程序外壳或标记和数据，这使得开发更容易。

使用 Chrome 调试也很容易。然而，当涉及到 SPA 时，SEO 有点复杂，因为它可能需要执行服务器端渲染或使用一些渲染服务来避免混淆爬虫。此外，如果用户关闭了他的 JS，你还需要在服务器端呈现页面，这将完全低效并打乱整个 SPA 的想法。

MPA 是我们习惯看到的传统页面，其中大多数操作通过 ajax 请求数据，甚至整个页面重新加载，它要复杂得多，前端和后端通常是紧密耦合的，但是，它们是SEO 效率更高。

奠定基础：

现在我们了解了 SPA 和 MPA 是什么，我们可以开始围绕什么是 React 和 Angular，并选择最适合我们应用程序的那个。

Angular与React差异比较：Angular 最初是作为 MV* 框架，即它可以用作 MVC 或 MVVM 架构。它非常灵活，许多人将这种灵活性视为一种难度，因为没有一种特定的做事方式。它由谷歌创建，并被许多公司使用，例如 Autodesk、Apple、Microsoft。Angular 专注于构建丰富的 SPA，当它在 2010 年左右首次发布时，它引入了许多新概念，震惊了世界。

另一方面，React 是一个用于构建丰富用户界面的 Javascript 库。

尽管对于许多开发人员来说，React 做事的方式感觉像是一个框架，但它不是一个框架。React 由 Facebook 创建和维护，他们在他们的应用程序中大量使用它。React 作为 MVC 架构中的视图，但除此之外，它还通过基于组件的架构引入了一种新的做事方式。

不同的 Angular 版本：

Angular 的历史相当混乱，首先，Angular 6 的主要版本只有 5 个，最近于 2018 年 5 月 3 日推出。

Angular 1.x 与任何更高版本都不兼容，因为 Angular 2 是对框架的完全重写。组件和指令取代了控制器和作用域，以跟上 React 引起的吸收。此外，从 Angular 2 开始，该框架开始使用 Typescript，它是 Javascript 的超集，提供静态类型和一些常规 Javascript 中不存在的引人注目的功能。

值得一提的是，在 Angular 1.5+ 组件中也引入了框架。由于某些兼容性问题，Angular 3 被跳过。随后是 Angular 4，接着是 Angular 5，引入了 Angular Service Worker，然后是 Angular 6。也不建议从 Angular 2 跳转到 Angular 6，尽管这是可能的。我们将坚持使用 Angular 6。

Angular：

Angular与React有什么区别？Angular 的核心是通过扩展和拦截事件循环以及增强处理器完成的 HTML 解析来扩展浏览器的功能。首先，让我们看一个简单的 Angular 应用程序，在这个演示中，我将使用 Angular 6。

要开始使用 Angular，我们将通过 npm 安装 Angular 命令行。为此，我们将运行

npm install -g @angular/cli

接下来，我们将使用创建一个新的应用程序

ng new [application name]

Angular 使用基于组件的架构，基本上，每个组件由 4 个文件组成，一个定义和实现组件的 typescript 文件，一个呈现视图的 HTML 文件，一个用于样式的 CSS 文件和一个用于测试的规范文件。在我们对应用程序进行任何更改之前，运行命令 ng serve，你将看到默认创建的应用程序正在端口 4200 上运行。

现在，在 src/app 中，清除 app.component.html 的内容。让我们创建我们自己的新组件。

Angular CLI 提供了一个强大的生成器，用于创建我们将使用的组件ng g component componentes/demo。现在我们的应用程序结构将如下所示：

在 demo.component.ts 中，我们将开始实现我们简单的双向绑定应用程序。我们将定义一个简单的消息，该消息应以默认消息开头，稍后更改并显示在视图上。@component 定义了组件的元数据。选择器是我们将用于包含此组件的自定义 HTML 名称。我们将在演示组件类中添加一个消息变量，并将其类型定义为字符串。在 ngOnInit 方法内部，我们会给它一个默认值。ngOnInit 是在组件挂载之前执行的生命周期方法，我们也可以为此使用构造函数，它们都将为该应用程序提供相同的结果。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: './demo.component.scss'
})

export class DemoComponent implements OnInit {
  message: string,
  constructor: () {}
  
  ngOnInit {
    this.message = "Hello"
  }
}

接下来，我们将创建 HTML，我们将使用 H1 标签来显示消息变量的当前值。双花括号用于插入消息的值。我们还将创建一个没有操作的表单，它由一个标签和一个文本类型的输入字段组成。要创建双向绑定，我们需要使用 ngModel，它允许我们更改消息变量的值，然后 name 属性将在输入字段内显示变量的值。所以在我们输入任何东西之前，它应该有默认值“Hello”写入其中。

<h1>{{ message }}</h1>
<form>
  <div>
    <label for="message">essage: </label>
    <input type="text" [(ngModel)]="message" name="message">
  </div>
</form>

为了完成这个小应用程序，我们需要在 app.component.html 中包含 app-demo 组件，这是我们应用程序的主要组件，实际上，在 app.module.ts 中包含 FormsModule 以便能够使用 ngModel。

<app-demo></app-demo>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppModule } from './app/component';
import { DemoComponent } from './components/demo/demo.component';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
imports: [
  BrowserModule,
  FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

现在，当我们保存并返回浏览器时，我们会发现我们的应用程序以双向绑定运行。

Angular与React哪个更好？事实上，Angular 提供了 3 种绑定方法，而不仅仅是一种。每一个都在此代码段的一行中进行了演示。

第一个是我们之前谈到的双向数据绑定，它会立即反映数据中的任何更改，如果用户更改了数据，则应用程序会立即看到它，反之亦然。

第二种方法是单向数据绑定，其中只有应用程序能够更改数据，并且它也会立即反映。

最后一种方法是一次性数据绑定，其中数据属性在其整个生命周期中仅被观察一次更改，并且仅看到更改的内容，如果更改，否则我们不会在应用程序中获取它。

Angular 将向你介绍许多其他概念，实际上你可以使用 Angular 做很多事情，例如，我们已经提到 Angular 已经扩展为更像 React 那样的组件驱动，你可以在 Angular 中创建自定义过滤器，使用表单验证和执行单元测试，以及许多其他很酷的东西，你可以在这里查看官方文档。Angular 还引入了依赖注入，它在发布时是开创性的，它改变了开发中许多事情的完成方式，因为依赖注入是提高代码可重用性和增强开发过程的有用模式。

React：

Angular与React有什么区别？React 是一个由 Facebook 创建和维护的可扭曲、灵活的界面制作库。这是他们的开源项目之一，已被 Instagram、雅虎、Wordpress、沃尔玛等许多其他公司采用，不胜枚举。

React 为游戏带来了基于组件的架构，彻底改变了 Web 开发并影响了 Angular 等其他框架跟随其领先地位。基于组件的架构比 Web 开发中的其他架构更易于维护，甚至更容易维护。它还通过创建可重用的组件来加快开发过程，让开发人员专注于页面上的每一个细节。

Angular与React差异比较：这就是 React 如何看待你的应用程序页面以及你在 React 中应该如何思考。

也就是说，你可以将 React 配置为 MV* 架构中的 V。让我们看一个简单的 Hello World 程序，看看 Action 中基于组件的架构。

我创建了一个名为 Hello 的简单组件，其默认函数 render 仅返回标头标签“Hello World”。

import React, { Component } from 'react';
import './App.css';
    
  class Hello extends Component {
    render() {
      return (
        <h3>Hello World!</h3>
      ); 
    } 
  } 
export default Hello;

在 Index.js 中，我们只使用 ReactDOM.render() 方法调用该组件并传入该组件以及它应该插入的位置，在这种情况下，它将被插入到 index.html 页面的根 div 中。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Hello from './App'
import registrationServiceWorker from './registrationServiceWorker';

ReactDOM.render('Hello', document.getElementById('root'));
registrationServiceWorker();

当我们点击 npm start 时，组件被渲染并且魔法发生了。

Angular与React哪个更好？然而，让 React 如此出名的并不是基于组件的架构；React 的虚拟 DOM 是它必须提供的最佳功能之一。简单地说，文档对象模型是网页对浏览器的表示，React 拥有自己的虚拟 DOM 来操作浏览器的实际 DOM，但由于它比浏览器的 DOM 快得多，因此大大提高了性能. React 的 Virtual DOM 每秒能够创建超过 200,000 个节点，这超出了大多数网站的需求。不仅如此，它还为每次更改重新创建 DOM，并且使用它使用的 Diffing 算法，它能够将差异计算从 O(n3) 的复杂度降低到 O(n)。diffing 算法是一个独立的丰富主题，它揭示了 React 的一些魔力，这里是来自 React 官方网站的完整文档。

React 的一项漂亮功能是引入了 JSX，即 Javascript 语法扩展。它在这个奇怪而有趣的片段中得到了说明。

const element=<h3>Hello World!</h3>;

虽然这不是 HTML，但也不是 Javascript。JSX 的美妙之处在于它可以帮助开发者可视化页面的内容，而且比传统的 Javascript 编写起来容易得多，注意你可以忽略 JSX 编写传统的 JS 和 React 就可以了，但这里有一点比较代码在使用和不使用 JSX 时的样子。

有 JSX。

ReactDOM.render(
   <h3>Hello World!</h3>
   ,document.getElementById('root') 
);

没有 JSX。

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello World!'
 ), document.getElementById('root'));

React 也是一个非常丰富的库，我们还没有提到 React 带来的道具、事件和表单以及一大堆令人惊叹的功能，你可以在他们的官方文档页面上深入查看。

Angular与React差异比较

嗯，当然 Angular 和 React 非常酷，了解它们会让你想同时使用它们（虽然你可以这样做，但我们在这里选择一个）。让我们让他们面对面了解一些开发人员可能感兴趣的更多比较点。

技术	Angular	React
技术类型	使用 Typescript 的基于组件的框架	使用 Javascript 的具有基于组件的架构的用户界面库
数据绑定	2路数据绑定	1路数据绑定
尺寸	相当大，因为它需要运送到客户端，它增加了初始加载时间	体积非常小，尤其是与 Angular 相比时
学习曲线	考虑到你在 Angular 中拥有的功能和选项的数量，相当陡峭	很容易上手和学习
表现	与 React 相比，Angular 2 和 4 是一些	由于虚拟 DOM，比 Angular 更快
简单	相当复杂	相当简单，但需要一些时间来设置项目和配置一切
可扩展性	由于强大的 CLI 和生成工具，易于扩展，许多大公司也使用它	相当容易扩展并且非常易于测试，这有助于扩展过程

Angular与React有什么区别？这里有一个重要的点要提一下，以防你不考虑从已经设置的架构迁移，而你只想为你的网站增添趣味。如果你正在运行诸如完整的 Ruby on Rails MVC 服务器之类的东西，你仍然可以考虑两个选项，Angular 和 React。

Rails Angular 有一些 gems，但它们已经过时并且维护得不好，原因当然是 Angular 并没有真正为服务器端运行和开发，尽管有使用 Angular 的方法和技术在服务器端，我们不会在这里讨论这些。

另一方面，将 React 与后端技术集成相当容易，即使是严格的 MVC 技术，React 也适用于服务器端渲染和客户端渲染。对于 rails，react-rails gem 维护良好并定期更新，因此如果你想保留整个后端功能并只调整视图，React 绝对是你的好帮手。然而，好消息是现在的大多数后端框架，包括 Rails，都可​​以在 API 模式下运行和创建，并且比以前更容易，借助许多包、gem 或库。这确实有助于为你的网站构建你想要的任何架构，并且你很可能熟悉 MEAN 和 MERN 堆栈，因为它们在今天非常流行。

概括

Angular与React哪个更好？如果我们有赢家，Web 开发会容易得多，但遗憾的是我们没有。这实际上取决于你想做什么以及你想如何做。如果简单性和大小对你来说最重要，那么你应该选择 React，但是，如果你不关心学习曲线并希望选择具有最多功能的最佳可扩展选项，那么 Angular 就是你的选择。两者都有很好的文档记录，并且两者的社区都非常成熟且乐于助人，你很可能会在需要时找到帮助。

只要永远记住使用这些工具来帮助你的开发过程而不是让它变得更复杂，归根结底，这些不是来自外部世界的神奇工具，它们是你可以重新发明的工具（至少理论上，它会带你永远去实践，而且可能不那么整洁）所以尽量充分利用这些工具，并尝试彻底学习和使用某个工具，而不是用不需要的工具干扰你的应用程序.