【repost】前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较
前端这几年的技术发展很快,细分下来,主要可以分成四个方面:
1.开发语言技术,主要是ES6&7,coffeescript,typescript等;
2.开发框架,如Angular,React,Vue.js,Angular2等;
3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;
4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative,Weex;计算机图形学和3维建模领域的WebGL(three.js等);可视化与数据分析领域的d3.js等;包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙,电池,本地存储,service worker,Houdini等新的API能力,以及像WASM这样的底层优化技术;
就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。
一 数据流
数据绑定
Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
实现原理:
$scope
变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,
$scope.$watch
函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
使用ng-model时,你可以使用双向数据绑定。
使用$scope.$watch
(视图到模型)以及$scope.$apply
(模型到视图),还有$scope.$digest
调用$scope.$watch
时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。
双向绑定的三个重要方法:
$scope.$apply()
$scope.$digest()
$scope.$watch()
在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会调用相应的处理方法来实现双向绑定
Vue 也支持双向绑定,默认为单向绑定,数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
脏检测的利弊
和ember.js等技术的getter/setter观测机制相比(优):
getter/setter当每次对DOM产生变更,它都要修改DOM树的结构,性能影响大,Angular会把批量操作延时到一次更新,性能相对较好。
和Vue相比(劣):
Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。
React-单向数据流
MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。
React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
React和Vue都可以配合Redux来管理状态数据。
二 视图渲染
Angular1
AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
React
React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁。
Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
在超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染。
React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少。
React 和 Angular 2 都有服务端渲染和原生渲染的功能。
Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好**,而且几乎不用手工优化。
三 性能与优化
性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。
四 模块化与组件化
Angular1 -> Angular2
Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的,根据依赖列出第一次加载所需的所有依赖。
可以配合类似于Require.js来实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架会更易懂。
Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。
Vue
Vue中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。
React
一个 React 应用就是构建在 React 组件之上的。
组件有两个核心概念:props,state。
一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板。
React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法,就是为了把 HTML 模板直接嵌入到 JS 代码里面,这样就做到了模板和组件关联,但是 JS 不支持这种包含 HTML 的语法,所以需要通过工具将 JSX 编译输出成 JS 代码才能使用(可以进行跨平台开发的依据,通过不同的解释器解释成不同平台上运行的代码,由此可以有RN和React开发桌面客户端)。
五 语法与代码风格
React,Vue,Angular2都支持ES6,Angular2官方拥抱了TypeScript这种 JavaScript 风格。
React 以 JavaScript 为中心,Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。
React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式(template,script,style写在一个vue文件里作为一个组件)
六 相关文章资料汇总:
[译] Angular 2 VS. React: 血色将至:
http://www.w3ctech.com/topic/1675
[原译] React vs Angular 2: 战争继续:
http://jixianqianduan.com/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html
Vue.js 对比其它框架:
https://vuejs.org.cn/guide/comparison.html
Angularjs双向绑定的研究:
https://www.nihaoshijie.com.cn/index.php/archives/306
Angular 从 1 到 2 快速参考:
https://angular.cn/docs/ts/latest/cookbook/a1-a2-quick-reference.html
知乎:react.js,angular.js,vue.js学习哪个好?
https://www.zhihu.com/question/39943474
React 简介和原理:
http://anjia.github.io/2015/07/24/fe_react/
浴火重生的Angular:
https://github.com/xufei/blog/issues/9
React 入门教程:
https://hulufei.gitbooks.io/react-tutorial/content/
Vue.js官方文档:
https://vuejs.org.cn/guide/
Angular2中文文档:
https://angular.cn/docs/ts/latest/tutorial/
本文的话题实际上很大,需要对Angular,React和Vue三门技术有足够深入的了解,所以难免有很多总结的不全或者不够深入的地方,后续我会不断完善和修改。
【repost】前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较的更多相关文章
- 【转】前端框架天下三分:Angular React 和 Vue的比较
前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...
- python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码
python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...
- 学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用
目录 学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用 23.1 跳出循环 23.1.1 break和continue 23.2 Shift参数左移指令 23.3 函数 ...
- 前端学习(二):head标签
进击のpython ***** 前端学习--head标签 head标签中的相关标签,是看不见摸不着的,仅仅是对应用于网页的一些基础信息(元信息) 前面说的是青春版,完整的head应该是这样的 !< ...
- 前端框架:Angular React 和 Vue的比较
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...
- (C/C++学习笔记) 二十三. 运行时类型识别
二十三. 运行时类型识别 ● 定义 运行时类型识别(Run-time Type Identification, RTTI) 通过RTTI, 程序能够使用基类的指针或引用来检查(check)这些指针或引 ...
- Python学习(二十三)—— 前端基础之jQuery
转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...
- web前端学习(二)html学习笔记部分(11)-- 没有标号记录的知识合集
这一部分内容相对比较简单,就不按规矩排序了.(主要是网站上也没有这一部分内容的排序) 1. html5的 非主体结构元素 学习笔记(1)里面记录过. 2. html5表单提交和PHP环境搭建 1. ...
- web前端学习(二)html学习笔记部分(10)-- HTML5构建应用布局和页面
1.2.25 HTML5构建应用布局和页面 1.2.25.1 HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...
随机推荐
- 为 github markdown 文件生成目录(toc)
业务需要 在编写 github 项目时,有时候会编写各种 README.md 等 markdown 文件,但是 github 默认是没有目录的. 于是就自己写了一个小工具. markdown-toc ...
- android 开发 View _16 自定义计步器View、自定义柱状图View
/** *@content:实现计步的环形View *@time:2018-7-30 *@build: */ public class CountStepsAnnularView extends Vi ...
- ARCore中四元数的插值算法实现
ARCore中四元数差值算法: 其中t的取值范围为[0, 1],当 t = 0 时,结果为a:当t = 1 时,结果为b. public static Quaternion makeInterpola ...
- Mybatis-spring 传统dao开发
jdbc.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/mybatis?chara ...
- error: ‘kEmptyString’ is not a member of ‘google::protobuf::internal’
最近安装caffe,突然报这个错: .build_release/src/caffe/proto/caffe.pb.h: In member function ‘void caffe::ImageDa ...
- VSCode搭建Java开发运行环境
用了一段时间VSCode,觉得还可以,想用VSCode整合不同的开发语言,于是研究了一下利用VSCode搭建Java环境.开发Java程序.网上这方面的帖子有不少,但每人的经历不同,把自己的经历记下来 ...
- java学习--java源文件
java源文件以“java”为扩展名.源文件的基本组成部分是类(class) 一个源文件中最多只能有一个public类.其他类(如抽象类,default类即省去修饰符的类,接口)的个数不限. 如果源文 ...
- JVM系列1:Java内存区域
JVM系列主要分享自己都虚拟机的理解,我自学时的知识框架多来源于<深入理解Java虚拟机_JVM高级特性与最佳实践>这本书,感兴趣的朋友可直接去阅读这本书. 本系列暂定有3部分,它们是学习 ...
- Jmeter正则表达式提取器二(转载)
转载自 http://www.cnblogs.com/qmfsun/p/5906462.html JMeter获取正则表达式中的提取的所有关联值的解决方法: 需求如下: { : "error ...
- day43 多表查询和pymysql
复习 增删改查全语法 # 增 insert into db1.t1(字段2, 字段1, ..., 字段n)|省略 values (值2, 值1, ..., 值n)|(值1, 值2, ..., 值n)[ ...