【译文&摘抄】Angular、React、Vue的2017

Bertha 。 2022-06-02 02:09 150阅读 0赞

原文地址：[https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176][https_medium.com_unicorn-supplies_angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176]  
作者：Jens Neuhaus

## Web 三剑客：Angular、React、Vue ##

**一些历史：**

**Angular**：源自 **Google**，是基于 **TypeScript** 的 Javascript 框架。被描述为：“超级厉害的 JavaScript MVW 框架”（Model- View-Whatever，MVW…..咦有点萌）

一段 create-react-app 的 TypeScript 代码：

// src/components/Hello.tsx
    
    import * as React from 'react';
    
    export interface Props { 
      name: string; // That's TYPE!
      enthusiasmLevel?: number;
    }
    
    function Hello({ name, enthusiasmLevel = 1 }: Props) { 
      if (enthusiasmLevel <= 0) {
        throw new Error('You could be a little more enthusiastic. :D');
      }
    
      return (
        <div className="hello">
          <div className="greeting">
            Hello {name + getExclamationMarks(enthusiasmLevel)}
          </div>
        </div>
      );
    }
    
    export default Hello;
    
    // helpers
    
    function getExclamationMarks(numChars: number) { 
      return Array(numChars + 1).join('!');
    }

**React**：被描述为 “**用于构建用户界面的 JavaScript 库**”，由 **Facebook** 进行开发和维护。  
Facebook 目前正在开发 **React Fiber**。它会改变 React 的底层算法，渲染速度应该会更快。

**Vue**: Vue 将自己描述为一款“用于构建直观，快速和组件化交互式界面的 MVVM (Model–view–viewmodel，MVVM 模式将 MVP 的 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。) 框架”。

![Angular，React 与 Due 的 Github Star 历史][Angular_React _ Due _ Github Star]

![在过去 2 年，npm 包的下载次数][2 _npm]

## Comparision ##

### 组件 ###

**React 和 Vue** 都擅长处理组件，组件其实即是函数，接收参数输入并返回元素作为输出。

详细说明：一个组件（本质就是一个函数）得到一个输入（函数参数），并且**进行一些内部的行为/计算之后，返回一个渲染的 UI 模板作为输出**。定义的组件应该易于在网页或其他组件中重用（组件的一个目的就是为了复用）。

### Typescript，ES6 与 ES5 ###

React 使用 Javascript ES6。  
Vue 使用 Javascript ES5 或 ES6。  
Angular 则依赖于 TypeScript。(尽管 TypeScript 在不断发展，但与整个 JavaScript 语言相比，TypeScript 的用户群仍然很小。一个风险可能是你正在向错误的方向发展…..)

### 模板 —— JSX 还是 HTML ###

React 打破了长期以来的最佳实践。几十年来，开发人员试图**分离 UI 模板和内联的 Javascript 逻辑**，但是使用 JSX，这些又被混合了。…..但是，分离模板和逻辑应该仅仅是技术的分离，而不是关注的分离。你应该构建组件而不是模板。组件是可重用的、可组合的、可单元测试的。

**JSX 是一个类似 HTML 语法的【可选预处理器】，并随后在 JavaScript 中进行编译。**

JSX 意味着 React 中的所有内容都是 Javascript – 用于JSX模板和逻辑。Cory House 在 2016 年 1 月的文章 中指出：“Angular 2 继续把 ‘JS’ 放到 HTML 中。React 把 ‘HTML’ 放到 JS 中。”  
**这是一件好事，因为 Javascript 比 HTML 更强大。**

### 框架和库 ###

Angular 是一个框架，但是 React 和 Vue 则是库。

之所以说 Angular 是一个库，是因为它提供了关于如何构建应用程序的强有力的约束，Angular 是一个 “**完整的解决方案” - 功能齐全**，你可以愉快的开始开发。**你不需要研究库，路由解决方案或类似的东西 - 你只要开始工作就好了。**

另一方面，React 和 Vue 是很灵活的。他们的库可以和各种包搭配。  
有了 React，你甚至可以交换库本身的 API 兼容替代品，如 Inferno。然而，灵活性越大，责任就越大 - **React 没有规则和有限的指导。每个项目都需要决定架构，而且事情可能更容易出错**。

关于 React & Vue : React “是 JS 界在意识层面向前迈出的一大步，它以一种实用简洁的方式向人们展示了真正的**函数式编程**。和 Vue 相比，React 的一大缺点是由于 JSX 的限制，组件的粒度会更小。这里是文章的引述：

> 对于我和我的团队来说，代码的可读性是很重要的，但编写代码很有趣也是非常重要的。在实现真正简单的计算器小部件时创建 6 个组件并不奇怪。在许多情况下，在维护，修改或对某个小部件进行可视化检查方面也是不好的，因为你需要绕过多个文件/函数并分别检查每个小块的 HTML。**再次，我不是建议写巨石 - 我建议在日常开发中使用组件而不是微组件**。

### 状态管理和数据绑定 ###

构建用户界面很困难，因为处处都有状态 - **随着时间的推移而变化的数据带来了复杂性**。定义的状态工作流程对于应用程序的增长和复杂性有很大的帮助。

它是如何工作的？  
**组件在任何时间点描述 UI**。当数据改变时，框架重新渲染整个 UI 组件 - 显示的数据始终是最新的。我们可以把这个概念称为“ **UI 即功能**”。

React 经常与 Redux 在一起使用；Vue 可以使用 Redux，但它提供了 Vuex 作为自己的解决方案。  
React 和 Angular 之间的巨大差异是单向与双向绑定。当 UI 元素（例如，用户输入）被更新时，Angular 的双向绑定改变 model 状态。React 只有一种方法：先更新 model，然后渲染 UI 元素。  
1）Angular 的方式实现起来代码更干净，开发人员更容易实现。  
2）React 的方式会有更好的数据总览，因为数据只能在一个方向上流动（这使得调试更容易）。

## How to Choose ##

如果你在Google工作：Angular  
如果你喜欢 TypeScript：Angular（或 React）  
如果你喜欢面向对象编程（OOP）: Angular  
如果你需要指导手册，架构和帮助：Angular

如果你在Facebook工作：React  
如果你喜欢灵活性：React  
如果你喜欢大型的技术生态系统：React  
如果你喜欢在几十个软件包中进行选择：React  
如果你喜欢JS和“一切都是 Javascript 的方法”：React

如果你喜欢真正干净的代码：Vue  
如果你想要最平缓的学习曲线：Vue  
如果你想要最轻量级的框架：Vue  
如果你想在一个文件中分离关注点：Vue  
如果你一个人工作，或者有一个小团队：Vue（或 React）

如果你的应用程序往往变得非常大：Angular（或 React）  
如果你想用 react-native 构建一个应用程序：React  
如果你想在圈子中有很多的开发者：Angular 或 React  
如果你与设计师合作，并需要干净的 HTML 文件：Angular or Vue  
如果你喜欢 Vue 但是害怕有限的技术生态系统：React

**如果你不能决定，先学习 React，然后 Vue，然后 Angular。**

[https_medium.com_unicorn-supplies_angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176]: https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
[Angular_React _ Due _ Github Star]: /images/20220602/e5c6e44fa15543be9452a3bb49be7cbc.png
[2 _npm]: /images/20220602/e594d025c75640df8cfda7cdc7fd7293.png