欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~
虚拟DOM(Virtual Document Object Model)的模拟DOM树操作需要用到DIff算法，推荐先看这句话下面的文章内容
DOM的本质
浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API
React中的虚拟DOM
框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套
实现虚拟DOM的目的
为了实现页面中， DOM 元素的高效更新
DOM和虚拟DOM的区别
- DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API
- 虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系
- 本质： 用JS对象，来模拟DOM元素和嵌套关系
- 目的：就是为了实现页面元素的高效更新
如何实现页面元素的高效更新
利用虚拟DOM可以实现页面元素的高效更新，那么如何实现页面元素的高效更新呢？
虚拟DOM表格排序案例
假如我有一个需求：点击列头，实现表格数据顺序的排序
- 数据来源：表格中的数据从数据库查询而来
-
存储：这些查询到的数据以
数组的形式，存放到了浏览器的内存中 -
渲染：
- 方案一：手动for循环整个数据，手动拼接字符串
str += '<tr>123<tr>' - 方案二：使用模板引擎，类似
art-template，比手动更方便点，其内部本质也是拼接了字符串
- 方案一：手动for循环整个数据，手动拼接字符串
-
思考：对于上述方案，思考其缺陷和解决方案
- 如果用户点击了
时间,想要按照时间从大到小的排序，其流程应当是：- 触发点击事件，在事件中，把内存中的对象数组，重新排序
- 当排序完成之后，页面时旧的，但是内存中的顺序是最新的
- 把最新的数据顺序渲染到页面上
- 上述方案只是实现了把数据渲染到页面中，但是并没有把性能做到最优，这里的第三步，完全可以按需渲染页面(只重新渲染排序中需要更新的数据所对应的页面元素)，以提高性能
- 如果用户点击了
-
DOM树实现按需渲染：
-
什么是
DOM树：-
DOM结构，类似下图1中的结构 -
一个网页的呈现过程
- 浏览器请求服务器获取
HTML代码 - 浏览器在内存中，解析
DOM结构, 并在浏览器中内存中渲染出一棵DOM树 - 浏览器把
DOM树呈现到页面上
- 浏览器请求服务器获取
- 怎么按需更新：获取内存中新旧两棵DOM树，得到需要被按需更新得DOM树
-
如何获取到新旧两棵DOM树：
- 浏览器并没有直接提供获取DOM树的相关API，因此无法拿到内存中的DOM树
- 可以自己手动模拟新旧两棵DOM树
- 那么怎么去模拟DOM树呢
- 模拟一个DOM元素，假如网页上有一个div元素，怎么模拟呢？用js以字面量赋值的形式进行模拟，看下图
模拟DOM元素 - 当旧的DOM发生改变，对比两棵DOM树的标签和值，如果都相等，则不变，如果标签相同，值不同，则修改，这样的新旧两棵树就是模拟DOM树
- 模拟一个DOM元素，假如网页上有一个div元素，怎么模拟呢？用js以字面量赋值的形式进行模拟，看下图
-
-
什么是
-
总结：什么是虚拟DOM
- 用JS对象的形式，来模拟页面上的DOM嵌套关系，即虚拟DOM是以JS对象的形式存在的
-
React中虚拟DOM对象的本质和目的：
- 本质：用JS对象来模拟DOM元素的嵌套关系
- 目的：实现页面元素的高效更新
DOM树
[图片上传失败...(image-ac5cb6-1548519997546)]
Diff算法
Diff算法
tree diff
上图中新旧两棵DOM树每一层对比的过程叫做tree diff，当整棵DOM树逐层对比完毕，则所有的按需更新的元素必然能够找到
component diff
在进行tree diff的时候，每一层中组件级别的对比，叫做component diff
如果对比前后，组件类型相同，则暂时认为不需要更新组件
如果对比前后，组件类型不同，则需要暂时移除旧组件，创建新组件，追加到页面上
element diff
在进行组件对比的时候，如果两个组件类型相同，需要进行元素级别的对比，这叫做element diff
