虚拟DOM和DIFF算法的理解
什么是虚拟DOM
当我们更新了state里的值之后,render方法就会被重新调用渲染ui,显然这样会极大地消耗性能,很不爽,所有react出了个虚拟dom,react在虚拟dom实现了diff算法,当render再次渲染的时候他不会去把整个render方法去重新渲染,他会去一一对应,发现不一致的话就会停止查找,取而代之替换掉,所以说react并不是渲染整个dom树,虚拟dom就是js数据结构,
虚拟DOM
谈谈虚拟DOM的底层原理
- state数据
- jsx模板
- 数据+模板+生成虚拟DOM(虚拟DOm就是个js对象,用它来描述真实的DOM)(损耗性能)
['div',{id:'adb'},['sapn',{},'hello']]
- 用虚拟DOM的结构生成真实的DOM,来显示
<div id='abc'><span>hello</span></div>
- state发生变化
- 数据+模板 生成新的虚拟DOM(极大的提升性能)
['div',{id:'adb'},['sapn',{},'bybe']]
- 比较原始虚拟DOM和新的虚拟DOm的区别,摘到区别是span中内部(极大提升性能)
- 直接操作dom,改变span的内容
优点: - 性能提升
- 他使得跨端应用得以实现,react native
虚拟dom的diff算法
在上面的第七步很关键,比较原始虚拟DOM和新的虚拟DOm的区别,比对的方式叫做diff算法(找他两的差异)
当state数据发生改变的时候,虚拟dom才会作比对,
先说setstate这个方法他是个异步,为什么是异步,为了提升底层的性能,比如setstate变更三组数据,react会做三次数据比对,然后更新三次页面,比较浪费性能 所以react会把三次浓缩成一次,提高性能
diff算法讲解
同级比较
左侧是个虚拟dom,当数据发生改变的时候右侧又会生成新的虚拟dom,他要做的就是比对差异,他会同层比对
首先比对第一层的数据,是否一致,假如一致,他会去比对第二层和,第二层数据不一致,react他不会往下比对,他发现数据不一致,它只比对一层虚拟dom他发现不对的话,他就不会在比较,整个原始dom从新渲染
问题来了他如果只比对一层下面都没法复用了么,不是很提高性能,这种比对好处,比对算法简单,速度快,大大减少两个虚拟dom直接算法上的性能消耗。
key值比较
在vue或者react里面如果使用for循环不加key值他都会出现警告建议我们加,有了key值就有了他们自己的名字好做对比,用上了key对很多操作提供了很好的操作
再循环为什么不建议用index?
问得好,因为你如果key用的index的话,在做删除的操作时候他是这个样子
对应的数据发生很大改变,不便于对比
如果index换成item呢,他是这样的
他会一一对应,好做对比,充分发挥了diff算法的作用
虚拟DOM和DIFF算法的理解相关推荐
- 虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
- vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与 ...
- vue--mixin混入以及虚拟DOM和diff算法
mixin混入 使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护 使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
- 【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数 创建虚拟节点 ...
- vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
- 探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
- 浏览器性能优化(2)React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
- 【总结】1135- 图解虚拟 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014 1. 目录 1. 相关知识点: 2. 虚拟DOM(Virtual DOM) 2.1. 什么是虚拟DOM 2 ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM 转载于:https://www.cnblogs.com/zqzjs/p/5798107.html
- 深入浅出虚拟 DOM 和 Diff 算法,及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理 认识虚拟 DOM ...
最新文章
- BST AVL 红黑树 B B+树
- 【bzoj2300】【Luogu P2521】 [HAOI2011]防线修建 动态凸包,平衡树,Set
- 数字语音信号处理学习笔记——语音信号的同态处理(3)
- 2020新年发红包Java实现
- 点开那些优秀的硕博士们的朋友圈,他们都有这些特点!
- 设置Apache Hadoop多节点集群
- 解决编译错误: 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum
- 从 重复叠加字符串匹配 看Java String源码中的contains方法
- 解决idea的.gitignore有时不起作用的问题
- TCP TIME_WAIT详解
- 法国政府正考虑采用开源软件
- QTP教程03 - 手工参数化
- PHP从入门到精通(数组运算符篇)
- 多人远程同时使用谷歌浏览器
- 浏览器内核以及渲染过程
- 【Openbravo开发】Openbravo windows开发环境搭建
- 小程序---宿主环境(常用组件、api)---02
- 老年程序员的出路何在
- Tkx/tk——瞬态窗口
- overflow溢出处理
热门文章
- WiFi Interface 的 name 如何获取到
- 直接内存回收中的等待队列
- 谈谈Linux下动态库查找路径的问题
- mpls 保留标签值_MPLS的前世今生11
- jquery radio设置选中_前端jQuery实战之 attr() 和 prop() 的区别
- ‘module‘ object has no attribute ‘computation‘
- Ubuntu12.04使用vi编辑器进入编辑模式按上下键出现乱码
- plsql 误删除了存储过程怎么处理_照片恢复 - 内存卡及手机误删照片怎么恢复?...
- android 新手引导轮播,GuideHelper-master
- @enableautoconfiguration注解作用_Spring Boot最核心的27个干货注解,你了解多少?