Vue、 React比较
关键词:MVVM(Model-View-VIewModel)数据模型双向绑定。视图的数据变化会同时修改数据资源,数据资源的变化也会立刻反应到视图View上。
一.vue.js
vue是一套构建用户界面的渐进式框架。采用自底向上的增量开发的设计。vue的核心在于只关注视图层,已于上手,便于和第三方库或既有项目整合。
二.React
react和vue有很多相似之处,它们都有:
① 使用virtual DOM
② 提供了响应式和组件化的视图组件
③ 将注意力几种保持在核心库,而将其他功能如路由和全局状态管理交给相关的库
三.二者的区别
在运行性能方面,react和vue都是非常快的。
优化方面:
在react应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。
如要避免不必要子组件的冲渲染,需要在所有可能得地方使用PureComponent,或者手动实现shouldComponentUpdate方法(默认为true)。
然而,使用 PureComponent
和 shouldComponentUpdate
时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。
在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate
,并且没有上述的子树问题限制。
Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。
Vue、 React比较的更多相关文章
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- 前端开发组件化设计vue,react,angular原则漫谈
前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...
- 三种Web前端框架比较与介绍--Vue, react, angular
一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
- 干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时. 数字增长等.相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签 ...
- 前端三大框架(Angular Vue React)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- uni-app,vue,react,Trao之缓存类封装
uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
随机推荐
- swift - layer - 渐变色 - CAGradientLayer
1.创建 渐变色 /// 渐变色:默认从上到下 private var gradientLayer: CAGradientLayer = { let g = CAGradientLayer() g.c ...
- [leetcode]122. Best Time to Buy and Sell Stock II 最佳炒股时机之二
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- js继承的几种类型
首先提供构造函数 1. 构造函数实现继承 原理:改变函数上下文实现继承(call,apply,return,bind) return {}/function(){} 如果返回值是对象 那么this ...
- 使用gearman进行异步的邮件或短信发送
一.准备工作 1.为了防止,处理业务途中出现的宕机,请配置好gearman的持久化方式.2.使用gearmanManager来管理我们的worker脚本,方便测试. 上述两条请看我之前写的两篇文章 二 ...
- javascript 字面量 和变量 之间的关系
https://www.w3cschool.cn/javascript/js-syntax.html
- DevExpress之TreeList节点绑定图片
最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片:查阅相关资料实现方法如下:1.首先打开VS2010新建一个WINFROM应用程序: 2.在WINFROM应用程序 ...
- json与字符串转换
一.json转为字符串 JSON.stringify(...) 二.字符串转为json JSON.parse(...)
- 使用vim编程步骤
先用vim 名字.cpp //创建一个.cpp文件进行代码编写 可以调用g++ 名字.cpp的形式进行编译,更好的方法是采用CMakeLists.txt touch CMakeLists.txt // ...
- PAT 1028 人口普查(20)(STL-set+思路+测试点分析)
1028 人口普查(20)(20 分) 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的--假设已知镇上没有超 ...
- UIButton 设置图片文字垂直居中排列
#pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...