Vue和React的对比
今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧
1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。 react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染, 如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate, 然后在里面作了props和state的浅层对比;
而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom
2.react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题, 就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控
详解:vue组件在初始化时会通过Object.defineProperty对每一个data属性建立对应的Wather,然后在模板编译时收集依赖。以后只要修改data的任何一个属性,就会触发视图的重新渲染,而且是精确的修改对应的vdom
react的机制是每次setState的时候,调用shouldComponentUpdate,判断state或props改变需不需要重新render,如果返回true才会渲染。默认的实现是返回true,PureComponent的shouldComponnentUpdate浅层对比了两次state,考虑到性能,需要写好shouldComponentUpdate。
3. react的思路是all in js,通过js来生成html, 所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等
vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件, 可以把html、css、js写到一个文件中,html提供了模板引擎来处理
详解:react渲染是使用jsx,用js来操作html,列表渲染、条件判断等都通过js来控制,而vue提供了模板的语法,支持指令、过滤器等模板功能,简化了渲染逻辑。在react组件里需要写大段js才能描述清楚的逻辑,使用vue的模板可以很简洁紧凑的表明。
模板和jsx各有优缺点,jsx全部使用js来写逻辑,更加的灵活,也没什么学习成本,但是有些渲染逻辑表达会比较啰嗦。 模板因为是专门针对渲染设计的DSL,所以写一些渲染逻辑时会特别的简洁和紧凑,但学习成本高一些,并且扩展需要通过指令和过滤器的方式。
4.react是类式的写法,api很少 而vue是声明式的写法,通过传入各种options,api和参数都很多。 所以react结合typescript更容易一起写,vue稍微复杂。 vue结合vue-class-component也可以实现类式的写法,但是还是需要通过decorator来添加声明,并不纯粹
5.react可以通过高阶组件(Higher Order Components--HOC)来扩展,而vue需要通过mixins来扩展 React刚开始也有mixin的写法,通过React.createClass的api,不过现在很少用了。 Vue也不是不能实现高阶组件,只是特别麻烦,因为Vue对与组件的option做了各种处理, 想实现高阶组件就要知道每一个option是怎么处理的,然后正确的设置。
6.react做的事情很少,很多都交给社区去做,交给社区去做的优势是可以产生很多优秀的方案,但是会增加技术栈的学习成本和上手难度。
vue很多东西都是内置的,写起来确实方便一些,内置的优势是技术栈学习成本低、上手快,但是方案变得不可替换了。
总结:浓缩出来就是 思性路写扩射 这六个字的简便记忆方法我不便给你们描述,我相信你们能悟出来,实在想知道的私信我好吧
参考文档:
从2张运行流程图看vue和react区别:https://www.jianshu.com/p/1ebe36fbdcda
今天就到这里了,各位继续加油!!!
Vue和React的对比的更多相关文章
- Vue于React特性对比(三)
最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...
- vue和react全面对比(详解)
vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...
- Vue于React特性对比(二)
一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...
- Vue于React特性对比(四)
新开了一个vue的项目,从vue单页面框架搭建到单点登录接入都是自己负责搞的.然后准备将这套东西迁移到react上.然后有了这篇文章. 1,reactjs分环境打包明显要比vue更为麻烦 vue修改的 ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- Vue和React对比
Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue、react、angular三大框架对比 && 与jQuery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
随机推荐
- 833. Find And Replace in String
To some string S, we will perform some replacement operations that replace groups of letters with ne ...
- Elastic-search在linux上的安装
今天是我装第四次 ES ,之前装好用了一段时间,后面莫名其妙爆炸了,炸出一堆异常... 安装环境: JDK1.8 centos ElasticSearch-6.2.4 jdk1.8以上,所以 ...
- Codeforces gym101612 E.Equal Numbers(贪心)
传送:http://codeforces.com/gym/101612 题意:给出一个大小为n的序列a[i],每次选其中一个数乘以一个正整数,问进行k步操作后最少剩下多少种数字,输出0≤k≤n,所有的 ...
- 你可能不知道的github语法——图标
概述 逛github,看到别人的仓库的description里面有各种炫丽的图标,不禁有点好奇,于是去查了下怎么写真的被我查到了,记录在下面,供以后开发时参考,相信对其他人也有用. 图标 可以先看看g ...
- Linux开机执行指定shell
目的:希望linux在开机或重启后第一时间启动部分服务或者执行特定脚本 1.需要在/etc/init.d/目录下建立对应的shell脚本,示例如下: 开机启动docker-compose中的所有容器 ...
- Liferay开发人员培训计划
第1节 1.介绍适合和不适合Liferay的一些应用领域2.安装Liferay开发环境,下载Liferay源码:3.配置Liferay bundle.Liferay SDK,配置数据库:4.Lifer ...
- Spark架构
Spark架构 为了更好地理解调度,我们先来鸟瞰一下集群模式下的Spark程序运行架构图. 1. Driver Program 用户编写的Spark程序称为Driver Progr ...
- setting-mirrorO以及下载jar包流程简介
mirrorOf常见的几种配置如下 1.* 2.repo3 3.repo1,repo2,*,!repo3 4.external:* 第二个例子只配置了一个repo3,这个镜像只能匹配id是repo3的 ...
- [EXP]XAMPP 5.6.8 - SQL Injection / Persistent Cross-Site Scripting
<!-- # Exploit Title: SQL injection (and previous) # Date: -- # Exploit Author: Rafael Pedrero # ...
- [EXP]McAfee ePO 5.9.1 - Registered Executable Local Access Bypass
# Exploit Title: McAfee ePO 5.9.1 Registered Executable Local Access Bypass # Date: 2019-03-07 # Exp ...