react中的虚拟DOM

数据驱动原理

用虚拟DOM：
·1. state数据
·2. JSX模板
·3. 数据 + 模板相结合，生成虚拟DOM（虚拟DOM就是一个js对象，用它来描述真实的DOM）['div', {id: 'abc'}, ['span', {}, 'hello']]（损耗了极小的性能）
·4.用虚拟DOM的结构生成真实的DOM<div id = 'abc'><span>hello</span></div>
·5. state 发生变化
·6. 数据 + 模板生成新的虚拟DOM （极大地提升了性能）['div', {id: 'abc'}, ['span', {}, 'bye']]
·7. 比较原始虚拟DOM和新的虚拟DOM的区别，找出区别是span中的内容
·8. 直接操作DOM，改变span中的内容

使用虚拟DOM完成数据驱动涉及到关键的一点就是如何比较两个虚拟DOM的差异

同层比对，列表使用不同的key值
用虚拟DOM完成数据驱动涉及到关键的一点就是如何比较两个虚拟DOM的差异

同级比较
diff算法中只会比较同级的元素，一旦发现某一级有所不同，则会把其子级丢弃，直接用新的差异的以及以及其下的所有自己替换。这也做的好处就是算法简单，也就提高了比对速度，因此也提升了性能
引用key值
for循环中需要给每个item增加一个key值，是因为当进行虚拟DOM比对时，我们需要比较出相同的元素和不同的，需要做两层循环比较，用上了key值则我们可以清楚比较出哪一个新增或删除了什么

注意：需要注意的是在开发中有些人习惯使用index做key值，如果我们创建了a、b、c三个item，key值分别定义为其index：0、1、2
当我们删除了a，则b、c 、key值变为了0、1，则每一项之间无法根据key值对应起来了因此建议是用稳定的值作为key值，比如id

实现虚拟DOM的目的

为了实现页面中，DOM元素的高效更新，优化性能
参考文档
深度剖析

react中的虚拟DOM相关推荐

React 中的虚拟 DOM 是什么？
虚拟 DOM 是一个基本的 React 概念.如果您在过去几年编写过 React 代码,您可能听说过它.但是,你可能不明白它是如何工作的以及 React 为何使用它. 本文将介绍什么是虚拟 DOM,它 ...
[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
[react] 为何说虚拟DOM会提高性能？
[react] 为何说虚拟DOM会提高性能? 虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能个人简介我是歌谣,欢迎和大家一起交 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
简单实现Vue中的虚拟dom
简单实现Vue中的虚拟dom 传送门:简单实现Vue中的插值替换(三) 前言: 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西. 说起来,我刚开始学习Vue的时候对虚拟 ...
vue 中的虚拟dom树
虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的当页面渲染的时候Vue会创建一颗虚拟DOM树当页面发生改变Vue会再创建一颗新的虚拟DOM树前后两颗新旧虚拟DOM树进行对比 ...
vue中的虚拟DOM原理
1.定义: 虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点,实际上它只是对真实 DOM 的一层抽象.最终可以通过一系列操作使这棵树映射到真实环境上. 相当于在js与DOM之间做了一个缓存, ...
Vue中的虚拟DOM
文章目录一.什么是虚拟DOM 二.虚拟DOM的作用提高性能三.通过模板转换成视图来理解一.什么是虚拟DOM 我们都知道DOM是什么,它是实实在在的被渲染在页面上的,我们平时的操作都和DOM息息 ...
React开发（140）:react中ref为dom添加ref

react中的虚拟DOM

数据驱动原理

实现虚拟DOM的目的

react中的虚拟DOM相关推荐

最新文章

热门文章