Angular vs. React：7个主要功能比较

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. 该商店跟踪应用程序的状态和数据检索方法。 状态的任何更新都会反映在视图中，这有助于使视图与应用程序的状态保持一致。

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

Flux是React的补充，并实现了单向数据流的概念。

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 arguments
 
  
    deleteUser(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&