之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性。最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比。

究竟如何正确使用?作为小白的我们从何学起比较好?带着一系列问题来看看吧。

这篇主要介绍:

1、从出身背景、优势、缺点、适合场景、开发模式、实践情况进行对比

2、相似之处

3、如何选择?


从出身背景、优势、缺点、适合场景、开发模式、实践情况进行对比

1、出身背景:

react是facebook团队开发,2013.3月发布。目前版本15.5.4(初始版本是13开头),社区较成熟,拥有更大的生态圈

vue是Evan You个人开发,2014年2月发布 vue2.0版本,生态圈较小

2、优势:

react官网推荐的三个特点如下:

  • 状态机 —轻松创建交互界面
  • 基于组件 —封装组件,管理状态
  • 学习一次,到处使用 —跨平台
  • 更大的规模、更多的使用者、更好的可测试性
  • Web和原生APP
  • 能提供更多支持和工具的更大的生态系统

vue 官网推荐的三个特点

  • 易用 —会html、css、js即刻开始使用
  • 灵活 —渐进式技术栈
  • 性能 —17kb (min+gzip),渲染速度更快,体积更小
  • 模板或渲染的灵活选项
  • 语法以及项目设置的简单

3、缺点:

react:

  • 需要转换开发模式(函数式编程)
  • 学习新的概念和语法(jsx、es5/6等)
  • 需要其他类库支持 (redux)

vue:

  • 个人维护框架,风险可能会更大
  • 社区不成熟,部分依赖开发人员更新
  • 资源较少

4、适合场景

react:

  • 大型复杂应用程序
  • 同时适用于web端和原生APP
  • 周期长,不断迭代的需求

vue:

  • 模板搭建开发模式
  • 周期短、小型应用程序

5、开发模式

react:

  • 函数式编程(JSX)
  • setState状态管理

vue:

  • 模板式开发
  • 属性对象

6、实践情况

react:

  • 国外公司:Facebook、Netflix、Airbnb
  • 国内公司:蚂蚁金服、阿里、口碑、美团、滴滴

vue:

  • 主要是饿了么

相似之处

React和Vue都是优秀的UI库,并且具有更多的相似之处。它们都有的优势是:

  • 使用虚拟DOM快速渲染
  • 轻量级
  • 响应式组件
  • 服务端渲染
  • 轻松集成的的路由、捆绑和状态管理
  • 强大的支持和社区

如何选择?

如果是以下需求选react

1、如果想组件式开发

2、如果想web和wap统一技术栈

3、如果想要代码更可维护和可测试性

4、如果你想要最大的生态系统,想利用丰富的组件库及第三方包

5、如果你想要构建大型应用程序

如果是以下需求选vue

1、如果你喜欢使用模板( 或需要一些其中的选项)构建应用程序

2、如果是在现有代码基础上快速升级

3、如果你喜欢简单的能正常工作的,想更加灵活性

4、如果你希望你的程序更小更快,想要更快的渲染速度和体积


最后

作为刚入门的小白, 可以先学Vue,然后再在vue的基础上学习React。所以下次就说说Vue吧~

【总结】前端框架:react还是vue?的更多相关文章

  1. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  2. 前端框架对比之vue与regular(一)

    每次一写到Regular总是忍不住先介绍一下,Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架,目前 这款框架推广的不深,加上其和angular过于相似的框架名,导致接受力并不大,其 ...

  3. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  4. 主流前端框架对比:Vue.js , React, Angular.js

    个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...

  5. 高性能前端框架React详解

      前  言 React 是一个用于构建[用户界面]的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebo ...

  6. 前端框架开始学习Vue(三)

    初步安装.与搭建    https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目 安装 nodejs,,, npm i == np ...

  7. 前端框架react研究

    摘要: 最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下.下面是我在开发中遇到的坑,希望能给你帮助. 项目地址:https://github.c ...

  8. 前端框架VUE----学习vue前的准备工作

    起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接 ...

  9. 前端框架开始学习Vue(二)

    1 根据关键字实现数组的过滤 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  10. 前端框架开始学习Vue(一)

    MVVM开发思想图(图片可能会被缩小,请右键另存查看,图片来源于网络)   定义基本Vue代码结构   1 v-text,v-cloak,v-html命令 默认 v-text没有闪烁问题,但是会覆盖元 ...

随机推荐

  1. SQLSERVER 使用XP开头的系统默认存储过程

    1. 根据官网上面的内容进行执行命令 EXEC xp_cmdshell 'dir *.exe'; 但是会报错 消息 ,级别 ,状态 ,过程 xp_cmdshell,行 [批起始行 ] SQL Serv ...

  2. facenet模型训练

    做下记录,脚本如下: 对比 python3 src/compare.py ../models/-/ ../faces/pyimgs/dashenlin/ytwRkvSdG1000058.png ../ ...

  3. Delphi报的错误

    引入单元时提示Unit 'Unit1' already uses all the units in the project. 可能是没有添加环境变量造成的,需要手动输入代码引用单元. 和Environ ...

  4. PostgreSQL窗口函数

    窗口函数允许在查询的SELECT列表和ORDER BY子句中使用. 如果有排序,要保证唯一,否则会有下面的错误: 修改方式是:保证唯一,修改方法如下:

  5. VM ware 中win2008 找不到网卡驱动的解决办法之一

    在.vmx文件中用如下语句指定: ethernet0.virtualDev = "e1000" 其值为e1000指定网卡类型为Intel(R) PRO/1000(6.5默认为此项) ...

  6. mysql事务隔离级别设置

    设置innodb的事务级别方法是:set 作用域 transaction isolation level 事务隔离级别: 若没有输入作用域直接修改transaction isolation,显示修改成 ...

  7. Mysql向数据库插入数据时,判断是否存在,若不存在就插入数据

    表中一定要有主键  : select :id,此处的id位置处必须是主键 insert into table_name(id, name, password) select :id, :name, : ...

  8. android app 的插件化、组件化、模块化开发

    Android 插件化 ——指将一个程序划分为不同的部分,比如一般 App的皮肤样式就可以看成一个插件 Android 组件化 ——这个概念实际跟上面相差不那么明显,组件和插件较大的区别就是:组件是指 ...

  9. View的setLayerType() , setDrawingCacheEnabled() 方法用法

    一.Android开发:用getDrawingCache方法获取ImageView中的图像需要注意的问题http://www.linuxidc.com/Linux/2011-09/43131.htm ...

  10. Android studio gradle配置完整版(转)

    Android studio gradle配置完整版https://my.oschina.net/u/1471093/blog/539075 Android studio 自定义打包apk名 - pe ...