阅读 4439

Vue与React两个框架的粗略区别对比

image

简单介绍

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表现上来看

react

vue

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

使用vue的公司

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

使用react的公司

image

UI生态

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

image

image

总结

Vue的优势包括:

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

React的优势包括:

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

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

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

总结比较速览

特点 VUE React
组件引用 分为全局注册和局部注册。 通过import相应组件,然后模版中引用。
数据流 1.父组件通过传递props来更新子组件视图,显示地调用props选项来声明它期待获得的数据。
2.vue是数据可变的,双向绑定,声明式的写法,vue组件的横向拆分很多情况下用mixin。
1.官方建议props要像纯函数那样,输入输出一致对应,而且不太建议通过props来更改视图。
2.react是整体的思路的就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,组件的横向拆分一般是通过高阶组件。
模版 把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。 all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、js等。
事件 1.每个Vue实例都实现了事件接口,方便父子组件通信,小型项目中不需要引入状态管理机制。
2.Vue增加的语法糖computed和watch。
1.必须自己实现事件。
2.只能使用JSX语法写一套逻辑来实现。
状态管理 1.state对象并不是必须的,数据由data属性在Vue对象中进行管理。
2.非父子组件之间嵌套过深的时候状态管理可引用vuex。
1.在react中是关键的概念,它是不可变的,在React中你需要使用setState()方法去更新状态。
2.非父子组件之间嵌套过深的时候状态管理可引用react-redux。
维护 由google前员工尤雨溪个人维护。 由facebook维护。
学习曲线 学习曲线平缓,内部封装很多语法糖 学习曲线稍复杂,更灵活
普及程度 截止到2018年10月29日 Github star 117604。 截止到2018年10月29日 Github star 114275。
使用场景 1.高级web单页面;
2.APP混合开发(阿里开源weex);
3.微信小程序开发(美团开源mpvue、网易考拉开源megalo);
4.结合electron开发桌面程序。
1.高级web页面;
2.APP混合开发(facebook开源react-native);
3.微信小程序(京东开源taro);
4.可结合electron开发桌面程序。
使用公司 根据不完全统计,包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。 蚂蚁金服、阿里巴巴、腾讯、百度、美团、滴滴、饿了么、京东、网易等。
UI生态 1.pc端:iview、element等;
2.h5端:有赞vant、mintui等;
3.混合开发:weexui,bui-weex;
4.微信小程序:iView Weapp、zanui;
1.pc端:Ant Design、Material-UI等;
2.h5端:Ant Design Mobile、weui等;
3.混合开发:teaset,react-native-elements;
4.微信小程序:iView Weapp、Taro UI;

参考文档