之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性。最近除了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. Windows 配置Reids集群 Redis Cluster

    一 .所需软件:Redis.Ruby语言运行环境.Redis的Ruby驱动redis-xxxx.gem.创建Redis集群的工具redis-trib.rb 二 .安装配置redis  redis下载地 ...

  2. vue element 新增、编辑类Dialog公用函数

    调用 <el-button type="primary" class="my-button" size="small" :loadin ...

  3. 知乎回答:每日完成任务用于打卡的APP

    其实我也一直在寻找最佳的解决方案.安卓上有这样的,叫做HabitHub.用过一段时间,不容易坚持,这个软件对于培养习惯来说无疑是最好的,但是仅限于记录,这样的软件实在太多.我这里提供一下我自己的方法, ...

  4. 一千个不用Null的理由

    原文链接:http://www.importnew.com/27378.html 原文出处: xrzs 港真,Null 貌似在哪里都是个头疼的问题,比如 Java 里让人头疼的 NullPointer ...

  5. 51nod 1785 数据流中的算法 | STL的应用

    51nod 1785 数据流中的算法 题面 动态求平均数.方差.中位数. 题解 这道题的坑: 平均数在答案中是向下取整输出并在后面添加".00" 方差:平方的平均数减去平均数的平方 ...

  6. 20135239 益西拉姆 linux内核分析 进程的切换和系统的一般执行过程

    week 8 进程的切换和系统的一般执行过程 [ 20135239 原文请转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course ...

  7. java回文算法

    1987891这个就是回文,判断“1987891”是不是回文? 1 public static boolean isPalindrome(String str) { return str.equals ...

  8. Android O 正式版新功能

    ref: Android O新特性和行为变更总结zzhttp://www.cnblogs.com/bluestorm/p/7148134.html Android O正式版带来了诸多新功能,如Tens ...

  9. Compile、Make和Build的区别(as make, build, clean, run)

    Compile.Make和Build的区别 - 熔 岩 - 51CTO技术博客 http://lavasoft.blog.51cto.com/62575/436216/ 针对Java的开发工具,一般都 ...

  10. (转)log4j(六)——log4j.properties试过过程详解

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 参考:https://www.cnblogs.com/ywlaker/p/6124067.html log4j基本用法 首 ...