首页 > 其他分享 >vue和react有什么区别?

vue和react有什么区别?

时间:2024-04-27 17:56:16浏览次数:28  
标签:React vue 区别 react key 组件 children

(1)核心思想不同

  vue:灵活易用的渐进式框架,进行数据拦截/代理,它对侦测数据的变化更敏感、更精确

  react:React推崇函数式编程(纯组件),数据不可变以及单向数据流,当然需要双向的地方也可以手动实现, 比如借助onChangesetState来实现

(2)组件写法差异

  vue:Vue 推荐的做法是 template 的单文件组件格式,即 html,css,JS 写在同一个文件(vue也支持JSX写法)

  react:React推荐的做法是JSX + inline style,也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js

(3)diff算法不同

  vue:updateChildren是vue diff的核心, 过程可以概括为:

  • 旧children新children各有两个头尾的变量StartIdxEndIdx,它们的2个变量相互比较,一共有4种比较方式
  • 如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明旧children新children至少有一个已经遍历完了,就会结束比较

Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅

  react:1)react首先对新集合进行遍历,for( name in nextChildren)

      2)通过唯一key来判断老集合中是否存在相同的节点,如果没有的话创建

      3)如果有的话,if (preChild === nextChild )

    • 会将节点在新集合中的位置和在老集合中lastIndex进行比较
    • 如果if (child._mountIndex < lastIndex) 进行移动操作,否则不进行移动操作
    • 如果遍历的过程中,发现在新集合中没有,但在老集合中有的节点,会进行删除操作

(4)响应式原理不同

  vue:

  • Vue依赖收集,自动优化,数据可变
  • Vue递归监听data的所有属性,直接修改
  • 当数据改变时,自动找到引用组件重新渲染

  react:

React基于状态机,手动优化,数据不可变,需要setState驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

 

详细请访问链接,本文参考自此:https://blog.csdn.net/jin_kwok/article/details/80105462

标签:React,vue,区别,react,key,组件,children
From: https://www.cnblogs.com/crazier/p/18162249

相关文章

  • 在JavaScript中,DOM对象与jQuery对象的区别与转换
    Dom原生对象和jQuery对象的区别:jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。注:js原生获取的dom是一个对象;jQuery对象就是一个数组对象。JQuery无法使用DOM对象的任何方法,同样的DOM对象也不能使用JQuery里......
  • VUE知识体系、VUE面试题
    1.computed(计算属性)和方法有什么区别?计算属性本质上是包含getter和setter的方法当获取计算属性时,实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存,每次调用方法都会导致重新执......
  • vue,js直接导出excel,xlsx的方法,XLSX_STYLE 行高设置失效的问题解决
    1、先安装依赖:xlsx、xlsx-style、file-saver三个包npminstallxlsxxlsx-stylefile-saver2、引入:<script>import*asXLSXfrom'xlsx/xlsx.mjs'importXLSX_STYLEfrom'xlsx-style';import{saveAs}from'file-saver';exportdefau......
  • React 《useEffect》
    概念useEffect是一个ReactHook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作(副作用),比如发送AJAX请求,更改DOM等等:::warning说明:上面的组件中没有发生任何的用户事件,组件渲染完毕之后就需要和服务器要数据,整个过程属于“只由渲染引起的操作”:::基础......
  • Vue中form表单常用rules校验规则
    是否合法IP地址constcheckIPCode=(rule,value,callback)=>{ if(/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/ .test(value......
  • 在数据库的查询与更新中,CHARINDEX与instr的区别?
    在数据库和字符串处理的领域中,CHARINDEX和INSTR是两个常用的函数,它们都用于查找子字符串在主字符串中的位置。尽管这两个函数在功能上有所重叠,但它们之间存在一些关键的区别,这些区别可能会影响开发者在选择使用哪一个函数时的决策。首先,CHARINDEX是SQLServer中的一个内置函数,它......
  • openharmony 多线程的方式有哪些?两个worker线程数据如何通讯、内存如何共享、与Java多
    OpenHarmony操作系统支持多种多线程并发处理策略,以提升应用的响应速度与帧率,以及防止耗时任务对主线程的干扰。以下是OpenHarmony中的多线程方式,以及Worker线程间的数据通讯和内存共享方法,还有它们与Java多线程的区别:OpenHarmony多线程方式Worker线程:OpenHarmony中的Worker是......
  • C/C++:new/delete与malloc/free的区别
    `new`和`delete`是C++中的关键字,而`malloc()`和`free()`是C语言中的函数。它们在内存分配和释放方面有几个重要区别:1.**类型安全性**:-`new`和`delete`是C++中的运算符,它们会自动计算所需的内存大小,并返回正确类型的指针。这意味着你不需要在使用时显式指定......
  • vue箭头函数、js-for循环、事件修饰符、摁键事件和修饰符、表单控制、完整购物车版本
    【箭头函数】1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&l......
  • vue3 快速入门系列 —— 状态管理 pinia
    其他章节请看:vue3快速入门系列Piniavue3状态管理这里选择pinia。虽然vuex4已支持Vue3的CompositionAPI,但是vue3官网推荐新的应用使用pinia——vue3pinia集中式状态管理redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。Pinia符......