【译文&摘抄】Angular、React、Vue的2017
2017-12-29 23:12
267 查看
原文地址:https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
作者:Jens Neuhaus
Angular:源自 Google,是基于 TypeScript 的 Javascript 框架。被描述为:“超级厉害的 JavaScript MVW 框架”(Model- View-Whatever,MVW…..咦有点萌)
一段 create-react-app 的 TypeScript 代码:
React:被描述为 “用于构建用户界面的 JavaScript 库”,由 Facebook 进行开发和维护。
Facebook 目前正在开发 React Fiber。它会改变 React 的底层算法,渲染速度应该会更快。
Vue: Vue 将自己描述为一款“用于构建直观,快速和组件化交互式界面的 MVVM (Model–view–viewmodel,MVVM 模式将 MVP 的 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。) 框架”。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/62ef710034ac717772b3238f911e3d4e)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/3fdee29980aefb15708d28573541af72)
详细说明:一个组件(本质就是一个函数)得到一个输入(函数参数),并且进行一些内部的行为/计算之后,返回一个渲染的 UI 模板作为输出。定义的组件应该易于在网页或其他组件中重用(组件的一个目的就是为了复用)。
Vue 使用 Javascript ES5 或 ES6。
Angular 则依赖于 TypeScript。(尽管 TypeScript 在不断发展,但与整个 JavaScript 语言相比,TypeScript 的用户群仍然很小。一个风险可能是你正在向错误的方向发展…..)
JSX 是一个类似 HTML 语法的【可选预处理器】,并随后在 JavaScript 中进行编译。
JSX 意味着 React 中的所有内容都是 Javascript – 用于JSX模板和逻辑。Cory House 在 2016 年 1 月的文章 中指出:“Angular 2 继续把 ‘JS’ 放到 HTML 中。React 把 ‘HTML’ 放到 JS 中。”
这是一件好事,因为 Javascript 比 HTML 更强大。
之所以说 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 的方式会有更好的数据总览,因为数据只能在一个方向上流动(这使得调试更容易)。
如果你喜欢 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。
作者: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。
相关文章推荐
- JavaScript 开发者:最喜欢 React,Vue.js 比 Angular 更值得尝试 | 2017 JS 调查报告
- vue、react、angular三大框架对比 && 与jQuery的对比
- [译文&摘抄]在 React & Redux 中使用 AJAX 轮询
- 前端框架选型续 && 分享下使用 Backbone、Vue、Angular、React 的经验
- 浅析angular,react,vue.js jQuery使用区别
- vue开发:vue,angular,react数据双向绑定原理分析
- Angular、React、Vue.js 等 6 大主流前端框架都有什么优缺点?
- 前端框架天下三分:Angular React 和 Vue的比较
- 【译文&摘抄】ECMAScript 6 里面的私有变量
- 【Todo】React & Nodejs学习 &事件驱动,非阻塞IO & JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可
- 浅析angular,react,vue.js jQuery-1
- vue、react、angular三大框架对比
- 最新Webpack3由浅入深及搭载vue,react,angular框架多维度讲解
- 【翻译&摘抄】React 应用性能调优
- 前端框架学习总结之Angular、React与Vue的比较详解
- vue, react, angular优缺点
- Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?
- Vue.js与Angular、React、Ember、Polymer、Riot框架的对比
- Vue.js 会成为像 Angular 和 React 那样的巨头吗? - 10Clouds
- 浅析angular,react,vue.js jQuery使用区别