React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML

Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就是普通的HTML。

Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

而对于React而言,每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。

Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素,只是多了一些属性。React推荐你所有的模板通用JavaScript的语法扩展——JSX书写

React/JSX乍看之下,觉得非常啰嗦,但使用JavaScript而不是模板来开发,赋予了开发者许多编程能力。

Vue的模板语法去除了往视图/组件中添加逻辑的操作,值得一提的是,与React一样,Vue在技术上也支持render函数和JSX,但只是不是默认的而已。

react 和 vue 的优缺点总结的更多相关文章

  1. React 和 VUE 的区别和优缺点

    前言 React 是由Facebook创建的JavaScript UI框架,React推广了 Virtual DOM( 虚拟 DOM )并创造了 JSX 语法.JSX 语法的出现允许我们在 javas ...

  2. React 还是 Vue: 你应该选择哪一个Web前端框架?

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  3. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  4. Angular React 和 Vue的比较

    Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...

  5. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  6. 前端框架:react还是vue?

    之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性.最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比. 究竟如何正确使用?作为小白的我们从 ...

  7. Jerry的碎碎念:SAPUI5, Angular, React和Vue

    去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5还是Vue这个话题. 我们代表SAP, 向客户推荐使用UI5是基于以下六点 ...

  8. react VS vue 我们究竟该如何选择(从项目的角度帮你分析)

    一.序言 现在web开发最火的两个框架,react和vue.听起来就感觉很牛逼的样子.确实,不得不服,创造出这2种框架的人真的是牛逼.不过更牛逼的是为这2中框架不断完善的人.一个优秀的idea,会在很 ...

  9. 技术趋势:React vs Vue vs Angular

    React.Vue 和 Angular 这两年发展状况如何?2019 年哪个技术最值得学习? 前几天 Medium 上有一位作者发表了一篇关于 React.Vue 和 Angular 技术趋势的文章( ...

随机推荐

  1. Expert C Programming(C专家编程) 读书笔记

    目录 几个比较奇葩的指针赋值 int (* fun())() int (* foo())[] int (*foo[])() const 关键词的意义是什么? char const (*next )() ...

  2. 剑指offer-面试题64-求1+2+...+n-发散思维

    /* 题目: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C) */ /* 思路: 递归. */ #incl ...

  3. 牛客网剑指offer第19题——顺时针打印矩阵

    这个题看似很简单: 题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...

  4. jQuery---on注册事件的2种方式

    on注册事件的2种方式 on注册事件的语法 on注册简单事件 // 这个是p自己注册的事件(简单事件) $("p").on("click", function ...

  5. C#设计模式学习笔记:简单工厂模式(工厂方法模式前奏篇)

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7551373.html,记录一下学习过程以备后续查用. 一.引言 简单工厂模式并不属于GoF23里面的设计模式 ...

  6. webdriver中的定位\模拟\及实例

    Selenium webdriver 下载 pip install selenium pip install -i https://pypi.doubanio.com/simple/ selenium ...

  7. node-express处理表单的接口

    写一个小接口,用postman测试接口是否可行

  8. PAT (Advanced Level) Practice 1055 The World's Richest (25 分) (结构体排序)

    Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...

  9. Linux 用户命令

    用户管理的命令 添加删除用户,注意的是,涉及到权限的修改,只能用root去操作,其他人基本上没权限 useradd caixukun #创建用户caixukunpasswd   caixukun #给 ...

  10. python3练习100题——039

    原题链接:http://www.runoob.com/python/python-exercise-example39.html 题目:有一个已经排好序的数组.现输入一个数,要求按原来的规律将它插入数 ...