相同点
1.都使用 virtual DOM
2.都是组件化开发 or 都提供了组件化的视图组件
3.数据的改变会引起视图的二次渲染
4.都只有骨架,其他的功能如路由、状态管理等是框架分离的组件。
5.都将注意力集中保持在核心库,有丰富的插件库
区别
1.渲染页面的方式不同:vue使用更简单的模版,变量使用{{}}解析,v-model实现双向数据绑定,
react使用jsx渲染页面,变量使用{}解析
2.数据流向不同:vue是双向的,react是单向的
3.Vue在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树;
    React每当应用的状态被改变时,全部子组件都会重新渲染。
4.vue的单页面组件后缀名为.vue,react的单页面组件后缀名为.js或.jsx
5.React和Vue都有自己的构建工具,vue使用vue-cli,react使用 Create React App(CRA), 由于CRA比较麻烦,最好使用webpack自己构建
6.循环:vue中用v-for,
react中用map,(别忘外面加{})
里面的直接子元素都要加key属性,vue中加:,react中不加
7.vue的初始化数据在data中,data必须要return出去,像计算属性computed比有返回值一样;
  react的初始化数据在this.state中;
  vue修改数据用this.str等,react修改数据用this.setState({})等等
8.vue中判断用v-if(v-else,v-else-if),
react中判断用if
9.vue中绑定类名用:class,
react中类名用className
10.vue中绑定事件用@click,react中绑定事件用onClick
11.
vue全家桶
    vue+vue-router+vuex+axios
react全家桶
 +fetch
11.vue组件                                   
 
react组件
12.vue生命周期
errorcaptured
react生命周期
静态时用componentDidMount
ReactDOM.unmountComponentAtNode(‘节点’)
 
 
 
 
14.
vue路由
react路由
 
vue传值与dom操作
父传子(数据):子组件标签上绑定属性,子组件内props 数组形式接收属性名
 
子传父:
   子组件标签上绑定自定义事件,子组件内部通过 this.$emit('自定义的事件名',传递的数据),
   父组件用相应的函数接受
平行组件传值:空vue对象  ,$emit(‘ ’,数据) 发送 ,  $on 接收
 
 
父操作子(元素方法):this.$refs.str
子操作父:this.$parent.tap()
最新dom:this.$nextTick(function(){     })
react传值与dom操作
属性props和状态state是react中数据传递的载体
 
 
 
 
 
 
15.
vuex
redux
 

版权声明:本文为ygunoil的原创文章,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文链接:https://www.cnblogs.com/ygunoil/p/12028229.html

vue与react对比的更多相关文章

  1. Vue和React对比

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

  2. vue与react对比总结(一)

    一.react和vue设计上的共同理念 1.使用 Virtual DOM 2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 3.将注意力集中保持在核心库,而将其 ...

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

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

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

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

  5. Vue和React的对比

    今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧 1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是 ...

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

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

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

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

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

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

  9. Vue于React特性简单对比(一)

    一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...

随机推荐

  1. vue.js环境安装

    1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...

  2. js style.display = "" 和style.display="none" 区别

    style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...

  3. EBS 清除高速缓存

    以R12.1.3为例: 以 “功能管理员 ”职责打开OAF界面 然后依次点击“核心服务”->“高速缓存结构”->“全局配置”->“清除所有高速缓存”->“是”,即可

  4. PHP基本语句

    语句分支语句if语句if if.........elseif.......else if.....else if 的嵌套switch语句 循环语句 for 循环 函数 函数的4要素::返回类型,函数名 ...

  5. leetcode 621 任务调度器 Task Scheduler

    给定一个用字符数组表示的 CPU 需要执行的任务列表.其中包含使用大写的 A - Z 字母表示的26 种不同种类的任务.任务可以以任意顺序执行,并且每个任务都可以在 1 个单位时间内执行完.CPU 在 ...

  6. virtualbox安装xp虚拟机缺少驱动

    下载驱动精灵完全版,自带万能驱动

  7. Java-Logger日志

    <转载于--https://www.cnblogs.com/yorickLi/p/6158405.html> Java中关于日志系统的API,在 java.util.logging 包中, ...

  8. 安装MySQL Enterprise Monitor

    MySQL Enterprise Monitor是专门为MySQL数据库而设计的一款企业级监控,能非常好地与MySQL各方面特性相结合,包括:MySQL的关键性能指标.主机.磁 盘.备份.新特性相关以 ...

  9. svn版本合并

    假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时候,突然接到 ...

  10. 去除雨滴的滤镜 Derain in FFmpeg

    Remove the rain in the input image/video by applying the derain methods based on convolutional neura ...