之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性。最近除了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. C++ Primer 中文版 5th Edition 练习15.8和练习15.9的解答

    练习15.8:给出静态类型和动态类型的定义. 答: 静态类型:是变量声明时的类型,或者是表达式生成的类型,这样的类型在编译时已知. 动态类型:是变量或者表达式表示的内存中的对象的类型,直到运行时才可知 ...

  2. DataTable List 相互转换

    This uses the FastMember's meta-programming API for maximum performance. If you want to restrict it ...

  3. DataRow数组根据指定列排序

    正序:DataRow[] datarow = datarow.OrderBy(x=>x["Ybrq"]).ToArray(); 倒序:DataRow[] datarow = ...

  4. css 样式 文字过长 换行处理方法

    css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...

  5. Redis 基础:Redis 事件处理

    Redis 事件处理 Redis服务器是一个事件驱动程序,服务器需要处理以下两类事件: 文件事件(file event):Redis服务器通过套接字与客户端(或其他Redis服务器)进行连接,而文件事 ...

  6. Long Long Message POJ - 2774(最长公共子串)

    题意: 给你两串字符,要你找出在这两串字符中都出现过的最长子串 解析: 先用个分隔符将两个字符串连接起来,再用后缀数组求出height数组的值,找出一个height值最大并且i与i-1的sa值分别在两 ...

  7. 读取Maven项目下resources目录下的配置文件(properties为例)

    配置文件:xxxxx.properties a.url=******************** b.url=---------------------------------- 读取配置文件: im ...

  8. 【ARC068F】Solitaire

    Description ​ 你有一个双端队列和 \(N\) 个数字,先按 \(1\) 到 \(N\) 的顺序每次从任意一端插入当前数字,再进行 \(N\) 次操作每次可以从两端弹出,求有多少种弹出序列 ...

  9. fzyzojP3782 -组合数问题

    这个ai<=2000有点意思 启发我们用O(W^2)的算法 FFT不存在,对应关系过紧 考虑组合意义转化建模,再进行分离 (除以2不需要逆元不懂为啥,但是算个逆元总不费事) 由于终点可能在起点的 ...

  10. R安装时出现辑程包不存在,解决方法

    R > -------------------------------------------------[解决方案]1.使用命令单独安装caret,安装的时间很长.install.packag ...