zoukankan      html  css  js  c++  java
  • 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实现快速渲染
    • 轻量级
    • 响应式组件
    • 服务器端渲染
    • 易于集成路由工具,打包工具以及状态管理工具
    • 优秀的支持和社区

    总结比较速览

    比较表格

    参考文档

  • 相关阅读:
    WEB安全第二篇--用文件搞定服务器:任意文件上传、文件包含与任意目录文件遍历
    WEB安全第一篇--对服务器的致命一击:代码与命令注入
    python的内存管理与垃圾回收机制学习
    java反序列化漏洞的检测
    python epoll实现异步socket
    Python class的属性访问控制和内建函数重写实现高级功能以及@property
    weblogic新漏洞学习cve-2017-10271
    PHP后门的eval类和system类 函数到底有哪些区别
    JS 转整型
    .NET MVC model数据验证
  • 原文地址:https://www.cnblogs.com/kung0806/p/10500297.html
Copyright © 2011-2022 走看看