今晚我们来搞一搞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的对比的更多相关文章

  1. Vue于React特性对比(三)

    最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...

  2. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  3. Vue于React特性对比(二)

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  4. Vue于React特性对比(四)

    新开了一个vue的项目,从vue单页面框架搭建到单点登录接入都是自己负责搞的.然后准备将这套东西迁移到react上.然后有了这篇文章. 1,reactjs分环境打包明显要比vue更为麻烦 vue修改的 ...

  5. vue、React Nactive的区别(转载)

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  6. Vue和React对比

    Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...

  7. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  8. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  9. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

随机推荐

  1. Android退出所有Activity最优雅的方式

    关于退出所有Activity,目前网上比较流行的方式大概有以下几种: ① 使用ActivityManager的方式: ② 自定义一个Activity集合类的方式: ③ 通过发送广播的方式: ④ 通过杀 ...

  2. dwr学习(一):简单dwr实例

    博客分类:  dwr   最近写ajax写烦了,想着能不能有个更简单的“ajax”,一问就问到这个dwr了.赶紧去官网学习了下,这里写个博客记录一下实例. 测试环境:tomcat6.0 1.新建一个w ...

  3. gitlab 一键 merge request(III)

    已经有两位同学写过类似的 wiki 了,值得一看: gitlab一键提交request merge & assign 为啥我又来凑热闹呢?基于下面两个原由: 我的机子是 Win10,上面脚本的 ...

  4. 【LeetCode】7. 整数反转python3

    题目 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1:输入: 123 输出: 321  示例 2:输入: -123 输出: -321 示例 3:输入: 120 输出 ...

  5. 【LeetCode】1. 两数之和

    题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  6. C# datagridview分页功能

    winform开发是或多或少都会接触datagridview控件,如果数据量大,那么必须使用分页功能,但是datagridview自身并没有分页,所以我们要自己实现.在网上搜了一些发现没有太适合自己的 ...

  7. python zip压缩文件 并移动到指定目录

    需要引入的3个包: import os import shutil import zipfile 1. # 创建zip文件对象your_zip_file_obj = zipfile.ZipFile(' ...

  8. GraphX之Pregel(BSP模型-消息传递机制)学习

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  9. ​​ ​​Java后端学习路线图,你真的只需要这一张!

    ​​​​ 前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java ...

  10. Myeclipse--jBPM4.3插件

    http://www.baidupcs.com/file/c7f3b8fc57b056567b37d081b1bcd21e?xcode=3966699596a0e8ec88581bd8407457f9 ...