Angular vs. React是前端JavaScript开发人员中的热门争论，而且，讨论最终往往偏向于一种技术或另一种技术。 分别由Google和Facebook开发的Angular和React是用于构建交互式单页应用程序的两种流行技术。

迫切需要对Angular和React进行全面的比较，因为在某些地方它们在它们提供的内容上有很大的重叠，即，构建应用程序的前端视图以及其他地方，除非获得第三方的帮助，否则它们的功能仍然不完整。政党图书馆。 采用一种技术而不是另一种技术是一个问题，即Angular或React是否可以更好地解决您的问题和一些直觉。 在本教程中，我们将比较和对比Angular和React的七个关键不同功能。

我是代码优先方法的热心拥护者（他们说，代码胜于雄辩）。 牢记这一点，我尽可能地添加了Angular和React的代码示例，以便您可以凭直觉确定哪个对您有用，哪些不起作用。 让我们开始吧。

框架与库

Angular是一个框架，而React是一个库。

那么这是什么意思？ React本身不允许您创建Web应用程序，因为它旨在创建视图（因此在MVC中为“ V”）。 React可以做的是构建基于组件的视图，可以将这些数据向下传递到子视图。 为了填补这一空白，Facebook开发了Flux ，这是一种补充React的架构模式。 当Flux架构与React结合使用时，可提供以下场景：

1. 用户单击React元素。
2. 动作被触发。 此操作通过分派器库分派到商店。
3. 该商店跟踪应用程序的状态和数据检索方法。 状态的任何更新都会反映在视图中，这有助于使视图与应用程序的状态保持一致。

没道理吗 这个数字应该可以为您解决。

Angular是用于构建客户端应用程序的框架。

AngularJS牢固地构建在MVC模式的顶部，该模式将应用程序分为三个不同的层。 模型，视图和控制器的结合，以及在掌握指令，工厂，服务和其他组件以创建单页应用程序时所涉及的复杂性的增加，迫使Google的开发人员转向基于组件的体系结构。

但是，当您的应用程序开始增长时，拥有一个牢固的结构以使应用程序的业务逻辑远离组件很重要。 作为框架，Angular允许您通过将业务规则移至域模型（使用模型类和服务的组合）并通过依赖注入将模型注入到组件中来实施结构化组织。

下面的代码示例说明了如何将业务逻辑封装在用户模型和用户服务内，以及如何远离我们的组件。

/* Path: /app/models/User.ts */export class User {id: number;username: string;password: string;firstName: string;lastName: string;
}

/* /app/services/user.service.ts */import { Injectable } from '@angular/core';
import { Http } from '@angular/http';import { User } from '../models/User';@Injectable()
export class UserService {constructor(private https: Http) { }getAll() {// API to return all users}create(user: User) {//API call to create user}update(user: User) {//API call to update user}delete(id: number) {//API call to delete user}}

/* Path: /app/page/page.component.ts */import { Component } from '@angular/core';import { User } from '../models/User';
import { UserService } from '../services/user.service';@Component({templateUrl: 'page.component.html'
})export class PageComponent {currentUser: User;users: User[] = [];constructor(private userService: UserService) {//Dependency is Injected inside the constructor's argumentsdeleteUser(id: number) {this.userService.delete(id).subscribe(() => { #Do Something});}private loadAllUsers() {this.userService.getAll().subscribe(users => { #Do something else });}
}

<!---Path: /app/home/page.component.html --><div class="title"><h2>All users:</h2><ul><li *ngFor="let user of users">{{user.username}} ({{user.firstName}} {{user.lastName}})- <a (click)="deleteUser(user.id)">Delete</a></li></ul></div>

基于组件的方法

组件是Angular应用程序中UI的最基本构建块。 Angular应用程序是Angular组件树。

什么是成分？ 在Angular中，组件是TypeScript类，在其上标记了@Component装饰器。 此外，在这些装饰器中，我们可以定义Angular所谓的元数据，其中包括模板，样式，选择器等。

Angular中的组件层次结构设计为可以在单个实体下关联结构和功能。 这是组件的高层架构概述，以及如何将其链接到Angular中的其他所有组件。

组件之间的数据共享可以通过嵌套组件来实现，如下所示。

/* UserParentComponent.ts */import { Component } from '@angular/core';// The <user-child> selector is nested inside <user-parent>. Each user is passed down as a property. @Component({selector: 'user-parent',template: `<h2>There are {{users.length}} registered users {{status}} now</h2><user-child *ngFor="let user of users"[user]="user"[status]="status"></user-child>`
})
export class UserParentComponent {users: { id: number, name: string }[] = [{ "id": 0, "name": "Chris" },{ "id": 1, "name": "Dwayne" },{ "id": 2, "name": "Eve" }];status: string =  "online";}

/* UserChildComponent.ts */import { Component, Input } from '@angular/core';// Input properties are adorned with @decorators
// user & status are input properties@Component({selector: 'user-child',template: `<h2>{{user.name}}</h3><p> id : {{user.id}} </p><p> Status: {{status}} </p>`
})
export class UserChildComponent {@Input() user: { id: number, name: string };@Input() status: string;
}

组件的概念与Angular一样，深深植根于React。 Facebook称React为一个基于组件的库，可让您构建交互式用户界面。 但是，与Angular不同，React组件只是具有任意数量的input和output的 JavaScript函数。 下面的代码显示了使用JavaScript函数和ES6类定义的组件。

// Writing components using JavaScript functionsfunction Welcome(props) {return <h1>Hello, {props.name}</h1>;
}// Writing components using ES6 Classclass Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

今后，我们将遵循ES6标准来组成组件，因为这是Facebook的建议。 每个React组件接受任意数量的输入，这些输入存储在名为props的对象中。

它还有一个render方法，顾名思义，此方法确定调用组件时将呈现的内容。 每个组件都维护一个内部状态（通过this.state ），并且每次状态更改时，都会再次调用该组件的render函数。

语言功能：TypeScript与ES6

Angular应用程序是用TypeScript编写的，它是ECMA2015的超集，并使用编译器将强类型的.ts文件编译为纯.js文件。 TypeScript提供了旨在使使用JavaScript编写变得更容易的语言扩展，并且将类型信息与JavaScript实体相关联以强制进行类型检查并增强开发工作流程。

TypeScript的一些关键功能包括可选的静态类型以及对接口，类和装饰器的支持。 （装饰器是以“ @”为前缀的函数，紧随其后的是类，参数或属性。）

让我们深入研究React，好吗？ 在此代码示例中，React的重要语言功能之一显而易见。

function Tweet(props) {return(<div className="tweet"><img src="http://twitter.com/some-avatar.png" className="tweet__avatar" /><div className="tweet__body"><p>This is a tweet.</p>  </div></div>);
}

这不是很好吗？ React使您可以将XML / HTML标记嵌入到JavaScript文件中，而这是通过JSX完成的，它提供了JavaScript的语法扩展功能。 我们必须使用Babel这样的编译器，它将我们的JSX代码编译为浏览器可以理解JavaScript。 上面的代码编译为：

"use strict";function Tweet(props) {return React.createElement("div",{ className: "tweet" },React.createElement("img", { src: "http://twitter.com/some-avatar.png", className: "tweet__avatar" }),React.createElement("div",{ className: "tweet__body" },React.createElement("p",null,"This is a tweet.")));
}

尽管建议使用JSX，但是如果您反对将HTML标签嵌入JavaScript的想法，则可以坚持使用React.createElement() 。

此外，在使用React时，您可以使用ES6标准或传统形式JavaScript。 尽管ES6相对较新，但它增加了许多功能，例如类，箭头函数，模板文字，析构以及let和const的使用。 我能想到的唯一缺点是，它增加了一些样板代码，例如每次调用constructor()都需要调用super() constructor() ，并且它不会自动与this绑定事件处理方法。

class User extends React.Component {constructor(props) {//bloat code alertsuper(props);this.handleSubmit = this.handleSubmit.bind(this);this.handleInputChange = this.handleInputChange.bind(this);}handleSubmit(user) {//Method to handle submit}handleInputChange(user) {//Method to handle input}render() {return (<div><UserRegistrationonSubmitSuccess={this.handleSubmit} onInputChange={this.handleInputChange}  /></div>);}
}

在React中的Angular和PropType中进行类型检查

静态类型检查在编译时执行。 编译器会警告您有关潜在的类型不匹配的信息，并检测某些本来不会引起注意的错误。 此外，在变量，属性或函数的参数上定义契约可以使代码更具可读性和可维护性。

通过声明变量和函数的数据类型，可以使其更具表达性。 您可以在TypeScript文档中了解有关不同原始数据类型的更多信息。

let isLoggedIn: boolean = false;
let id: number = 10;
let name: string = "Davis";
let list: number[] = [1, 2, 3];enum Color {Red, Green, Blue};
let c: Color = Color.Red;
let bucket: any = 4;
bucket = "I can be a string";
bucket = false; // or a boolean

使用接口定义API的签名，可以减少代码的歧义并使其易于理解。 该界面可作为快速入门指南，帮助您立即开始使用代码，并节省在阅读文档或库的实际实现上所花费的时间。

interface ButtonSettings {text: string;size?: { width: number; height: number; };color?: string;
}function createButton(settings: ButtonSettings) { ... }createButton({ text: 'Submit' }); // OK
createButton({ text: 'Submit', size: { width: 70, height: 30 }}); // OK
createButton({ text: 'Submit', color: 43); // Not OK: 43 isn't a string
createButton({ text: 'Submit', size: { width: 70 }); // Not OK: size needs a height as well
createButton({ color: 'Blue'}); // Not OK: 'text' member is required

TypeScript中的type关键字可用于为类型创建别名。 然后，您可以创建新类型，这些新类型是这些原始类型的并集或交集。

//Union Typestype Age = number | string;
function getAge (age: Age): string {return `You are ${age}!`;
}let ofSusan: Age =21;
let ofTyler: Age = 'thirty one';
getAge(ofSusan); // You are 21!
getAge(ofTyler); // You are thirty one!//Intersection Typesinterface Name{name(firstName: string, lastName: string): string;
}interface Age {age(current: number): number;
}
// assign intersection definition to alias User
type User = Name & Age;function createUser (testUser: User) {testUser.name("David","John");testUser.age(99);testUser.address(); //error

由于底层的ES6不支持，所以React对类型检查的支持有限。 不过，您可以使用React团队开发的prop-types库实现类型检查。 可以如下所示对组件的props进行类型检查，以检查它是否为字符串。

import PropTypes from 'prop-types';
//importing prop-types libraryclass Greeting extends React.Component {render() {return (<h1>Hello, {this.props.name}</h1><P> My age is, {this.props.age} </h2>);}
}Greeting.propTypes = {name: PropTypes.string;age: PropTypes.number;
};

但是prop-types不仅限于字符串，数字和布尔值。 如prop-types库文档中所述，您可以做更多的事情。 但是，如果您认真对待静态类型检查，则应使用Flow之类的东西，它是JavaScript的静态类型检查器库。

脚手架：Angular CLI与create-react-app

从头开始一个项目可能看起来很有趣。 但是，设置目录结构，编写组件的样板代码以及引导应用程序启动的过程是徒劳的，没有效率。 您的策略应该是尽快着手进行，并专注于应用程序的实际开发。 感谢Google和Facebook，您可以使用一些工具轻松地创建和构建应用程序。

使用npm可以轻松地为React设置angular-CLI和create-react-app。

// Angular CLI$ npm install -g @angular/cli// create-react-app$ npm install -g create-react-app

要创建新的Angular应用程序，应使用以下命令：

$ ng new PROJECT-NAME
$ ng serve

但这不是。 ng generate命令使您可以生成组件，路由，管道，指令和服务。

$ ng generate component Pageinstalling componentcreate src\app\page\page.component.csscreate src\app\page\page.component.htmlcreate src\app\page\page.component.spec.tscreate src\app\page\page.component.tsupdate src\app\app.module.ts

Angular CLI可以做很多事情，例如创建Angular应用程序的内部版本，用于运行单元测试的命令以及端到端测试。 您可以在GitHub上阅读有关它的更多信息。

另一方面， create-react-app是创建没有任何配置文件的React应用程序的正式支持方式。

$ npm install -g create-react-app

这应该创建一个功能完备的React应用程序，并照顾好所有Babel和webpack依赖项。 您可以使用npm start在浏览器上开始运行该应用npm start 。

您可以在package.json文件中找到可用于react应用程序的脚本。

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"}
}

数据绑定：双向绑定与单向绑定

数据绑定是一项使应用程序状态（模型）与视图之间的数据同步的功能。 在单向数据绑定例程中，应用程序状态的任何更改都会自动更新视图。 相反，双向数据绑定将单个实体下的属性和事件绑定在一起，即模型的任何修改都会更新视图，反之亦然。

在React中，属性从父组件传递到子组件，这被称为单向或自顶向下的数据流。 组件的状态已封装，其他组件无法访问，除非将其状态向下传递给子组件作为道具，即组件的状态成为子组件的道具。

class UserChild extends React.Component {render() {let userData = this.props.users.map( (user) => {return (<p> <strong>{user.id} </strong> : {user.name} </p>);});return (<div><h2> Hello. The server is {this.props.status} </h2>{userData}</div>);}
}class UserParent extends React.Component {constructor() {super();//State gets defined herethis.state = {status: "Online"}}render() {return (<div><UserChild users={this.props.users} status={this.state.status} /></div>);}
}var USERS = [{ "id": 0, "name": "Chris" },{ "id": 1, "name": "Dwayne" },{ "id": 2, "name": "Eve" }
];ReactDOM.render(<UserParent users={USERS} />,document.getElementById('container')
);

但是，如果您需要通过组件树向上传播数据怎么办？ 这是通过子事件和父回调完成的。 React文档包含一个很好的例子来处理这种情况。

Angular中可用的数据绑定技术是使它有趣的一些功能之一。 Angular对插值，单向绑定，双向绑定和事件绑定提供了开箱即用的支持。

插值是将组件属性绑定到HTML标记和属性分配之间的文本内的最简单方法。

<p>Welcome back {{currentUser.name}}!</p>

在可以将视图元素的属性绑定到组件属性的意义上，属性绑定与插值相似。 属性绑定有利于组件通信，并且与在React中传递props相同。

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>


事件绑定允许数据沿相反的方向流动，即从元素到组件。 在这里， click是目标事件，在右侧，我们具有onSave()方法，该方法在事件发生时被调用。

<button (click)="onSave()">Save</button>

但是最重​​要的功能是使用[(ngModel)]的双向绑定。 这将属性绑定和事件绑定合并在一个指令下，对于表单和输入字段特别有用。

<div><label>name: </label><input [(ngModel)]="hero.name" placeholder="name">
</div>

服务器端渲染

服务器端渲染是一种传统的渲染技术。 在这里，服务器根据请求返回整个HTML文件，浏览器只剩下向用户显示文件的简单工作。 另一方面，客户端渲染将返回准HTML文档，样式表和JavaScript文件。

JavaScript发出随后的请求，以使用浏览器呈现网站的其余部分。 React，Angular和所有其他现代JavaScript前端库都是客户端渲染的很好示例。 如果查看Angular / React应用程序的源代码，这是显而易见的。

但是客户端渲染的缺点是，它不适用于SEO，并且当您在社交媒体网站上共享链接时，它会返回不完整HTML内容。 Angular提供了一个名为Angular Universal的解决方案，该解决方案可以使您的应用搜索引擎友好且对社交媒体友好。 这是由Angular团队构建的库，使用它肯定是受青睐的。

Universal利用预渲染技术，首先从服务器渲染整个网站，然后在几秒钟后，将用户切换到客户端渲染。 由于所有这些都是在后台进行的，因此用户不会注意到任何不同。

如果您将React与Redux一起使用，则Redux文档提供了有关设置服务器渲染的很好的教程。 您还可以使用react-router库中提供的BrowserRouter和StaticRouter组件将React设置为从服务器进行渲染。 您可以在这篇中型文章中阅读有关它的更多信息。 但是，如果您想进行性能和优化，则可以尝试next.js ，这是React中用于SSR的库。

包起来

将成熟的，功能丰富的框架与健壮的UI库进行比较似乎并不公平。 但是，它们是用于创建交互式单页应用程序的高级JavaScript技术，在这一方面，本文应帮助您决定选择其中一种。

您对Angular与React有何看法？ 请在下面的评论中分享它们。

翻译自: https://code.tutsplus.com/articles/angular-vs-react-7-key-features-compared--cms-29044