简单介绍

React--Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML(译者注:即HTML in JavaScript)。

Vue致力解决的问题与React一致,但却提供了另外一套解决方案。Vue使用模板系统(弱化的jsx),使其对现有应用的升级更加容易。这是因为模板用的就是普通的HTML,通过Vue来整合现有的系统是比较容易的,不需要整体重构。同时Vue的学习曲线相对react来说更加容易。

相似之处

React与Vue有很多相似之处,如他们都是JavaScript的UI框架,专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。

  • 两者都是用于创建UI的JavaScript库;
  • 两者都快速轻便;
  • 都有基于组件的架构;
  • 都是用虚拟DOM;
  • 都可放入单个HTML文件中,或者成为更复杂webpack设置中的模块;
  • 都有独立但常用的路由器和状态管理库;

它们之间的最大区别是Vue通常使用HTML模板文件,而React则完全是JavaScript。Vue有双向绑定语法糖。

不同点

在Vue组件中,有几个观念和React相差比较大,我觉得主要有以下这几点:

  • Vue组件分为全局注册和局部注册,在react中都是通过import相应组件,然后模版中引用;

  • props是可以动态变化的,子组件也实时更新,在react中官方建议props要像纯函数那样,输入输出一致对应,而且不太建议通过props来更改视图;

  • 子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需,另两者都有props校验机制;

  • 每个Vue实例都实现了事件接口,方便父子组件通信,小型项目中不需要引入状态管理机制,而react必需自己实现;

  • 使用插槽分发内容,使得可以混合父组件的内容与子组件自己的模板;

  • 多了指令系统,让模版可以实现更丰富的功能,而React只能使用JSX语法;

  • Vue增加的语法糖computed和watch,而在React中需要自己写一套逻辑来实现;

  • react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等;而 vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。

  • react做的事情很少,很多都交给社区去做,vue很多东西都是内置的,写起来确实方便一些, 比如 redux的combineReducer就对应vuex的modules, 比如reselect就对应vuex的getter和vue组件的computed, vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue不需要。

  • react是整体的思路的就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,组件的横向拆分一般是通过高阶组件。而vue是数据可变的,双向绑定,声明式的写法,vue组件的横向拆分很多情况下用mixin。

社区活跃度

从两者的github表现上来看

可以看出vue的star数量已经是前端框架中最火爆的。从维护上来看,react是facebook在维护,而vue现阶段虽然也有了团队,但主要还是尤雨溪在维护贡献代码,并且阿里巴巴开源的混合式框架weex也是基于vue的,所以我们相信vue未来将会得到更多的人和团队维护。根据不完全统计,包括饿了么、简书、高德、稀土掘金、苏宁易购、美团、天猫、荔枝FM、房多多、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。

使用vue的公司

根据不完全统计,包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。

使用react的公司

UI生态

react有material-design,蚂蚁金服的ant-design等,vue有饿了么出品的element以及iview等。

总结

Vue的优势包括:

  • 模板和渲染函数的弹性选择
  • 简单的语法及项目创建
  • 更快的渲染速度和更小的体积

React的优势包括:

  • 更适用于大型应用和更好的可测试性
  • 同时适用于Web端和原生App
  • 更大的生态圈带来的更多支持和工具

而实际上,React和Vue都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的:

  • 利用虚拟DOM实现快速渲染
  • 轻量级
  • 响应式组件
  • 服务器端渲染
  • 易于集成路由工具,打包工具以及状态管理工具
  • 优秀的支持和社区

总结比较速览

参考文档

Vue与React两个框架的区别对比的更多相关文章

  1. Vue与REACT两个框架的区别和优势对比

    VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...

  2. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  3. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

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

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

  5. 前端两大框架 vue 和 react 的区别

    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...

  6. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  7. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  8. 前端-关于 Vue 和 React 区别的一些笔记

    监听数据变化的实现原理不同 1.Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 2.React 默认是通过比较引用的方式进行的,如 ...

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

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

随机推荐

  1. Android6.0 源码修改之 Contacts应用

    一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 Qu ...

  2. SpringBoot集成Lombok,应用+源码解析,让代码优雅起来

    一.Lombok简介 (1)Lombok官网(https://projectlombok.org/)对lombok的介绍 (2)GitHub项目地址:https://github.com/rzwits ...

  3. 第65章 博客帖子 - Identity Server 4 中文文档(v1.0.0)

    第65章 博客帖子 65.1 团队帖子 65.1.1 2019 IdentityServer中的范围和声明设计 尝试使用IdentityServer4的设备流程 OAuth2中隐含流的状态 另一种保护 ...

  4. 委托与lambda关系

    什么是委托委托是没有方法体的,声明委托就是一个关键字: delegate ,委托可以试有参无参,有返回值无返回值.和我们的方法是一样的.不同的区别是 委托没有方法体的,委托可放在类下也可以放在类的外面 ...

  5. .net相关知识

    1.简述 private. protected. public. internal 修饰符的访问权限. private :   私有成员, 在类的内部才可以访问. protected : 保护成员,该 ...

  6. 【代码总结● Swing中的一些操作与设置】

    Swing中设置关闭窗口验证与添加背景图片 package com.swing.test; import java.awt.EventQueue; import java.awt.Image; imp ...

  7. 查看多核CPU各核的状态

    1 top  命令,然后按数字“1” 2  命令:mpstat -P ALL  3 命令:sar -P ALL 输出较多,可grep或者重定向至文件查看 个人推荐使用第二种方式,操作方便且输出较少,看 ...

  8. 瑞芯微RKnanC芯片处理器介绍

    RKnanC是一种低成本.低功耗.高效率的数字多媒体芯片,它是基于ARM的低功耗处理器结构和硬件加速器.它是专为便携式音频产品应用,如MP3播放器等. RKnanC可以支持各种音频标准的解码,如MP3 ...

  9. Redis内存模型(2):存储细节

    1. 概述 先看一下执行set hellow world时,所涉及的数据模型: (1)dictEntry:Redis是Key-Value数据库,因此对每个键值对都会有一个dictEntry,里面存储了 ...

  10. Android 开发学习资源汇总

    下面这些资源对Android开发来说是很有帮助的! 1. 在线代码运行工具 地址:https://tool.lu/coderunner/ 说明:此工具站能在线运行C.C++.Java,基本能满足相关基 ...