React当中的虚拟DOM

bovenson 发布于2019-08-23 18:34 / 358人阅读

在react当中虚拟DOM可以说优化了很多我们对真实DOM的操作，优化了性能。 什么是虚拟DOM？

vdom可以看作是一个对象，使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息；

html：

123

`
vdom(是一个json 对象，暂时用数组表示):

`
["div", { class: "demo" }, ["span", {}, "123"]]
`

如何实现虚拟dom？

思考一：

1. 生成state 数据；
2. 解析jsx模版；
3. 数据 + 模版 生成真实DOM显示出来；
4. state 发生变化；
5. 数据 + 模版 生成真实DOM替换到原有DOM；

缺点：

生成了2次DOM模版，数据发生变化将原有DOM整个替换掉；

思考二：

1. 生成state数据；
2. 解析jsx模版；
3. 数据 + 模版生成真实DOM显示出来；
4. state 发生变化； 
5. 数据 + 模版 生成真实DOM 并不替换原有DOM；？。，m n
6. 在内存中将新DOM（DocumentFragment）与原始DOM，做对比，找差异；
7. 找出对应的发生了变化；
8. 用新DOM对应的位置替换掉原始DOM发生变化的地方；

缺点：

虽然节约了整个替换的性能，但是也多了很多步骤，并且损耗了内存中做DOM比对的性能；在性能提升 
上并没有得到多大的提升；

思考三：

1. 生成state数据；
2. 解析jsx模版；
3. 数据 + 模版生成真实DOM显示出来；
4. 数据 + 模版生成原始虚拟DOM（Json），来表述真实DOM；
5. state 发生变化；
6. 数据 + 模版生成新的虚拟DOM，
7. 对比原始虚拟DOM与新的虚拟DOM的差异；
8. 操作真实DOM，将差异部分进行修改；

为什么react当中的虚拟DOM可以提高性能呢？

主要是因为减少了对真实DOM的操作，以及真实DOM的对比，取而代之的是用js对象的对比，这样实现 
了性能的极大的飞跃。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105460.html

虚拟DOM与DIFF算法学习

摘要：比较虚拟与的差异，以及对节点的操作，其实就是树的差异比较，就是对树的节点进行替换。忽略掉这种特殊的情况后，大胆的修改了算法按直系兄弟节点比较比较。这当中对比的细节才是整个算法最精粹的地方。一、旧社会的页面渲染在jQuery横行的时代，FEer们，通过各种的方式去对页面的DOM进行操作，计算大小，变化，来让页面生动活泼起来，丰富的DOM操作，让一个表面简单的页面能展示出...

codergarden 2019-08-23 10:32 评论0 收藏0
漫谈前端性能突破 React 应用瓶颈

摘要：表示调用栈在下一将要执行的任务。两方性能解药我们一般有两种方案突破上文提到的瓶颈将耗时高成本高易阻塞的长任务切片，分成子任务，并异步执行这样一来，这些子任务会在不同的周期执行，进而主线程就可以在子任务间隙当中执行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以来是前端开发中非常重要的话题...

whlong 2019-08-26 12:10 评论0 收藏0
精益 React 学习指南（Lean React）- 1.1 React 介绍

摘要：单向数据流应用的核心设计模式，数据流向自顶向下我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句。然而的单向数据流的设计让前端定位变得简单，页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 评论0 收藏0