谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值
一、DocumentFragment
在了解虚拟DOM前,先来了解DOM的一个对象属性——DocumentFragment
。
在一次操作中,需要频繁操作DOM时,就可以先将要改变的节点附在DocumentFragment
上,之后再将该对象渲染到DOM中,改方法只对DOM进行了一次操作,可以显著提高性能。
但是该方法只适用于局部操作,而在真实的项目中,需要的不仅仅是DocumentFragment
,于是就有了虚拟DOM的产生
紧接着,对于这么一个东西,我们先来基本的三连问。是什么?为什么?怎么用?
二、VDOM
什么是虚拟DOM?
虚拟DOM的本质是一个和真实DOM结构类似的JS对象
为什么要用虚拟DOM?
虚拟DOM可以提高浏览器的渲染速度。对比操作JS对象,操作真实的DOM消耗的性能较多,频繁的操作DOM时,优势彰显的更为明显。
虚拟DOM的实现步骤?
1、在页面首次渲染时,将要渲染的数据全部加载到虚拟DOM中,而后在一次性渲染到真实DOM上
2、在数据变化时,额外的生成一颗虚拟DOM树
3、通过Diff算法对比修改的部分,而后将修改部分渲染到真实的DOM中
4、释放内存
真实DOM与虚拟DOM示意图
真实DOM
虚拟DOM
则类似与如下图
三、Key值的用处
在一个Vue项目或者React项目中,写循环时,往往会加上key值。那么这个key值到底有多大的用处呢?
首先,在Vue中,存在一个DOM复用机制,会尽量的回收DOM元素进行复用,而这个机制本身是高效的,但很多时候也会造成不可预知的Bug,而在加了key值后,元素就有了一个标识,复用机制不会复用带key值的元素。而React也存在类似的机制。
反之,若使用相同的key值,可以使组件复用,也有可能导致渲染内容缺失。
因此,key值一般来说,最好是
独一无二
的。除此之外,虚拟DOM在使用Diff算法进行对比时,若存在key值,可以更高效更迅速。
谈谈Vue/React中的虚拟DOM(vDOM)与Key值的更多相关文章
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- 简谈react中的虚拟DOM
相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM 此篇我尽量说人话(大白话),不然想必你在看到别的大神的文章早就懂了. 不说废话了,上干货. 1.首先简单对Html中的 ...
- React中的虚拟DOM
当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...
- 1.React中的虚拟DOM
1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- vue中的虚拟DOM树
什么是虚拟DOM树?(Virtual DOM) 虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 01 当页面渲染的时候Vue会创建一颗虚拟DOM树 02 ...
- Vue源码探究-虚拟DOM的渲染
Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- 【Web技术】401- 在 React 中使用 Shadow DOM
本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...
随机推荐
- 用express实现CORS跨域(上-简单请求)
今天遇到了一个跨域请求登录验证的问题.所以有了尝试跨域的机会. 具体情景是,有一个登录界面写在名叫cas的站点上,但是相关的登录验证的后台接口是写在名叫earth的站点. 首先的反应是使用jsonp, ...
- Windows cmd findstr
/********************************************************************************** * Windows cmd fi ...
- 使用 Python 发送短信?
上回食行生鲜签到,我们说到怎么把签到结果发出来,于是就找到了 Twilio. Twilio 是一个位于加利福尼亚的云通信(PaaS)公司,致力于为开发者提供通讯模块的 API.由于 Twilio 为试 ...
- NOIP 2011 DAY 2
第一题:计算系数 题目 给定一个多项式 (ax+by)k,请求出多项式展开后xnym 项的系数. 输入 共一行,包含 5 个整数,分别为 a,b,k,n,m,每两个整数之间用一个空格隔开 ...
- PUN介绍(干货)
PUN介绍 入门 Photon Unity Networking(首字母缩写PUN)是一个Unity多人游戏插件包.它提供了身份验证选项.匹配,以及快速.可靠的通过我们的Photon后端实现的游戏内通 ...
- python中文件打开的各个标识含义
w代表清空后写入 r代表打开后追查 +代表可以写 b代表二进制写入
- 文件异步上传,多文件上传插件uploadify
本文中使用java作为例子 uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip jsp页面中需要引入: <script type=&q ...
- BackgroundWorker 控件
BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作.耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 始终处于停 ...
- python编程范式培训文档,主要是结合4种代码和,对oop和面向过程编程区别和oop转化公式培训。
这是写得培训文档.代码例子在附件. 是经过深入考察 4个git项目里面,找出代码非常非常十分low.代码重复得吓人的的最本质原因.提炼出oop转化公式. 围绕附件中的4种代码写法思维来实现同一个任务, ...
- 关于导入excel报错的处理(xls,xlsx)
关于导入excel报错的处理(xls,xlsx) 最近在做一个将excel导入到dataGriview中的小功能在做的过程中遇到以下问题: 链接excel的链接串是这样写的 string strCon ...