虚拟DOM与Diff算法

2019-01-27 本文已影响0人这里王工头

欢迎访问我的博客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表格排序案例

假如我有一个需求：点击列头，实现表格数据顺序的排序

数据来源：表格中的数据从数据库查询而来
存储：这些查询到的数据以数组的形式，存放到了浏览器的内存中
渲染：
1. 方案一：手动for循环整个数据，手动拼接字符串str += '<tr>123<tr>'
2. 方案二：使用模板引擎，类似art-template，比手动更方便点，其内部本质也是拼接了字符串
思考：对于上述方案，思考其缺陷和解决方案
1. 如果用户点击了时间,想要按照时间从大到小的排序，其流程应当是：
  1. 触发点击事件，在事件中，把内存中的对象数组，重新排序
  2. 当排序完成之后，页面时旧的，但是内存中的顺序是最新的
  3. 把最新的数据顺序渲染到页面上
2. 上述方案只是实现了把数据渲染到页面中，但是并没有把性能做到最优，这里的第三步，完全可以按需渲染页面(只重新渲染排序中需要更新的数据所对应的页面元素)，以提高性能
DOM树实现按需渲染：
1. 什么是DOM树：
  1. DOM结构，类似下图1中的结构
  2. 一个网页的呈现过程
    1. 浏览器请求服务器获取HTML代码
    2. 浏览器在内存中，解析DOM结构, 并在浏览器中内存中渲染出一棵DOM树
    3. 浏览器把DOM树呈现到页面上
  3. 怎么按需更新：获取内存中新旧两棵DOM树，得到需要被按需更新得DOM树
  4. 如何获取到新旧两棵DOM树：
    1. 浏览器并没有直接提供获取DOM树的相关API，因此无法拿到内存中的DOM树
    2. 可以自己手动模拟新旧两棵DOM树
    3. 那么怎么去模拟DOM树呢
      1. 模拟一个DOM元素，假如网页上有一个div元素，怎么模拟呢？用js以字面量赋值的形式进行模拟，看下图模拟DOM元素
      2. 当旧的DOM发生改变，对比两棵DOM树的标签和值，如果都相等，则不变，如果标签相同，值不同，则修改，这样的新旧两棵树就是模拟DOM树
总结：什么是虚拟DOM
1. 用JS对象的形式，来模拟页面上的DOM嵌套关系，即虚拟DOM是以JS对象的形式存在的
2. React中虚拟DOM对象的本质和目的：
  1. 本质：用JS对象来模拟DOM元素的嵌套关系
  2. 目的：实现页面元素的高效更新

DOM树

[图片上传失败...(image-ac5cb6-1548519997546)]

Diff算法

tree diff

上图中新旧两棵DOM树每一层对比的过程叫做tree diff，当整棵DOM树逐层对比完毕，则所有的按需更新的元素必然能够找到

component diff

在进行tree diff的时候，每一层中组件级别的对比，叫做component diff

如果对比前后，组件类型相同，则暂时认为不需要更新组件

如果对比前后，组件类型不同，则需要暂时移除旧组件，创建新组件，追加到页面上

element diff

在进行组件对比的时候，如果两个组件类型相同，需要进行元素级别的对比，这叫做element diff