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

原文地址：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 模式完全一致。) 框架”。

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。