当前位置: 首页 > news >正文

react和vue的区别

一、核心思想不同
Vue的核心思想是尽可能的降低前端开发的门槛,是一个灵活易用的渐进式双向绑定的MVVM框架。

React的核心思想是声明式渲染和组件化、单向数据流,React既不属于MVC也不属于MVVM架构。

如何理解React的单向数据流?
React的单向数据流指的是数据主要从父节点通过props传递到子节点,如果顶层某个props改变了,React会重新渲染所有的子节点,但是单向数据流并非单向绑定,React想要从一个组件去更新另一个组件的状态,需要进行状态提升,即将状态提升到他们最近的祖先组件中,触发父组件的状态变更,从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性,假如,父组件维护了一个状态,子组件如果能够随意更改父组件的状态,那么各组件的状态改变就会变得难以追溯。

二、组件写法上不同

Vue的组件写法是通过template的单文件组件格式。

React的组件写法是JSX+inline style,也就是吧HTML和CSS全部写进JavaScript中。all in js

三、Diff算法不同
vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。

vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到最后一个,从这点上来说vue的对比方式更加高效。

四、响应式原理不同

React主要是通过setState()方法来更新状态,状态更新之后,组件也会重新渲染。
(注:setState时,设置的新对象会和旧对象进行混合)

vue会遍历data数据对象,使用Object.definedProperty()将每个属性都转换为getter和setter,每个Vue组件实例都有一个对应的watcher实例,在组件初次渲染的时候会记录组件用到了那些数据,当数据发生改变的时候,会触发setter方法,并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法,进行渲染数据。

相关文章:

  • 数字身份所有权:Web3时代用户数据的掌控权
  • EXCEL VBA获取幸运数字号码
  • C++---string类
  • Cinder组件作用
  • HarmonyOS鸿蒙学习基础篇 - 项目目录和文件介绍
  • 计算机基础之总线与I/O总线
  • [Linux] Ubuntu install Miniconda
  • Broadcom交换芯片56620架构
  • 嵌入式Linux:如何进行嵌入式Linux开发?
  • 目标检测YOLO实战应用案例100讲-橘子自动采摘机视觉识别
  • R语言——AVOCADO“(异常植被变化检测)算法(1990-2015数据分析)监测森林干扰和再生(含GEE影像下载代码)
  • 甜蜜而简洁——深入了解Pytest插件pytest-sugar
  • Matplotlib Mastery: 从基础到高级的数据可视化指南【第30篇—python:数据可视化】
  • React16源码: React中的updateHostRoot的源码实现
  • 【Docker】安装Nginx容器并部署前后端分离项目
  • JavaScript 如何正确处理 Unicode 编码问题!
  • CentOS7简单部署NFS
  • download使用浅析
  • JSONP原理
  • JS基础之数据类型、对象、原型、原型链、继承
  • PHP变量
  • python3 使用 asyncio 代替线程
  • quasar-framework cnodejs社区
  • Storybook 5.0正式发布:有史以来变化最大的版本\n
  • win10下安装mysql5.7
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 温故知新之javascript面向对象
  • 新版博客前端前瞻
  • 一起参Ember.js讨论、问答社区。
  • 用Python写一份独特的元宵节祝福
  • 原生js练习题---第五课
  • linux 淘宝开源监控工具tsar
  • PostgreSQL之连接数修改
  • 函数计算新功能-----支持C#函数
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (C#)一个最简单的链表类
  • (poj1.2.1)1970(筛选法模拟)
  • (Python第六天)文件处理
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (离散数学)逻辑连接词
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)程序员疫苗:代码注入
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET CF命令行调试器MDbg入门(四) Attaching to Processes
  • .NET 事件模型教程(二)
  • .net快速开发框架源码分享
  • @Autowired 与@Resource的区别
  • @configuration注解_2w字长文给你讲透了配置类为什么要添加 @Configuration注解
  • @ModelAttribute注解使用