【译文&摘抄】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 模式完全一致。) 框架”。

Angular,React 与 Due 的 Github Star 历史

在过去 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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值