开发者学堂课程【React 入门与实战：虚拟 DOM 的本质和目的】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8075
虚拟 DOM 的本质和目的
目录：
一、虚拟 DOM 的介绍
二、DOM 的本质
三、react 中的虚拟 DOM
四、虚拟 DOM 的目的
五、虚拟 DOM 的原理流程
六、虚拟 DOM 示例
七、DOM 与虚拟 DOM 的区别
一、虚拟DOM 的介绍
1. DOM 的本质
虚拟 DOM 是框架中的概念，它主要的目的是为了实现 DOM 元素的高效更新
浏览器中的概念，用S对象来表示页面上的元素，并提供了操作 DOM 对象的 API；
2.React 中的虚拟 DOM
框架中的概念，是程序员用S对象来模拟页面上的 DOM 和 DOM 嵌套；使用原生 Javascript或 jQuery 直接操作 DOM 元素时，很大可能会触发回流事件，此时浏览器需要重新渲染页面，设置整个文档，计算 DOM 节点浪费了性能，而且效率低，非常影响用户体验。
3.虚拟 DOM 的目的
为了实现页面炉，DOM 元素的高效更新；
提供与真实 DOM 节点所对应的虚拟节点 vnode
将虚拟节点 vnode 和旧虚拟节点 oldVnode 进行对比，然后更新视图
4. 虚拟 DOM 原理流程
（1）用 JavaScript 模拟 DOM 树，并渲染这个 DOM 树
（2）比较新老 DOM 树，得到比较的差异对象
（3）把差异对象应用到渲染的 DOM 树
5.虚拟 DOM 示例
当前我们有如下表格
需求：
点击列头，实现对应表格数据的排序;比如点击时间这一列，时间从大到小排序；点击新关注人数，就按照新关注人数排序
1. 表格中的数据从哪来的：从数据库查询查询而来:
2. 这些查询到的数据，存放到浏览器内存:数据在浏览器的内存中存放着，而且是以对象数组的形式来表示的，通过 ajax 和网络传输。
3. 这些数据，是如何渲染到页面上的，方案有很多种。
如何把数据形成表格形式
方案1:
手动 for 循环整个数组，然后手动拼接字符串 str+=''，最终会得到完整的tr,放置到表格中即可查看
方案2:
使用模板引擎，art-template
区别：模板引擎更加方便，内部本质也是提供字符串，最大区别方便程序员使用
4.思考:
上述的方案，有没有性能上的问题?
如果第一次来渲染，必须 for 循环，若不是第一次渲染，假如用户点时间表头就会点击事件触发，然后就会对事件进行排序，这个表格的数据是从数组得来的，也就是看到的就是数组里的数据，但他的数据是乱的
在事件中拿到数据进行排序，表格是经 for 循环而来。内存中交换，数组顺序将会改变，把最新的数组重新渲染到表格
5.如果用户点击了[时间]这一列，想按照时间从大到小排序:
1）第一步：触发点击事件，在事件中，把内存中的对象数组，重新排序。
2）第二步：当排完序之后，页面是旧的，但是内存中的对象数组是新的。
3）第三步：想办法把最新的数组，重新渲染到页面上。(重点思考第三步有没有性能上的问题)
假设说之前的数据是20、21，点击时间之后，20和21两行就会交换一下位置，而后面的数据不需要排序，所以只操作这两行数据就行，这样整个数组的数据就排序完成。然后就要用第三步对最新的数组进行重新渲染到页面上，或者手动 for 循环，那就需要把整个数组重新渲染一遍，但是后面这几行数据他没变，那就没必要去重新渲染，因为如果重新渲染的话，还会有一些性能上的损耗。其实最好的一个方法那就是只交换20、21这两行的位置就可以了，后续就不需要管。
若按照时间排序，后面的数据是不需要后换的，只需要互换操作的数据，不需要重新被渲染。两行变只需要交换变的行
6.分析与总结:上述方案，只是实现了把数据染到页面上的能力，但是并没有把性能做到最优。
7．如何才能把性能做到最优:
按需求渲染页面: (只重新渲染更新的数据所对应的页面元素)
假如表格很长，有千行，会涉及数据的重复渲染，性能就会低下
8.如何实现页面的按需渲染呢?
1、通过分析，DOM 树，一个网页是一个树结构的形式，标签是嵌套的 DOM 树, DOM 树是浏览器提供
2、DOM 树概念：
一个网页呈现的过程:
（1）浏览器请求服务器获取页面 HTML 代码
（2） 浏览器要现在内存中，解析 DOM 结构，并在浏览器内存中，渣染出一颗 DOM 树;
（3） 浏览器把 DOM 树，呈现到页面上;
前端程序员进行按需更新
（4） 例子：
怎么实现 DOM 树，先定义两个 DOM 树这是之前的老表格，然后另一个是目前最新的那个表格。第一行、第二行、第三行、第四行，这是老表格里面 DOM 树，新表格那这里面也有第一行，第二行、第三行，第四行这每一行都是一一对应的。那接下来怎么才能实现安全中心？
对比看第一行和第一行旧的和现在是否一样，再看第二行是否一样。发现第一行数据变了，那就把第一行标记为是不是需要被安全更新，第二行对比发现也改变了，所以也需要安全更新。但是再往下，第三行和第四行是不是并没有任何改变？
那这两行就不需要去更改，这样的话，通过两颗树的对比就可以实现 DOM 树。
9.如何实现页面的按需更新？
通过对比进行按需更新，对比行与行的内容，两颗 DOM 树详细对比实现按需更新，进而对比，得到需要按需更新的 DOM 元素；
10.如何获取到新旧 DOM 树，从而实现 DOM 树的对比？
操作 DOM 是一定要通过它提供的 API，浏览器里面会提供 DOM、API，比如 document 的 ID 都是那些浏览器提供，要想要获取这个新旧 DOM 树，是要调用相关的 API 才能拿到，但是从脑海里面去搜索一遍，没有这样的 API 来获取 DOM 树的 API，也就是浏览器里面并没有提供让我们程序员获取 DOM 树的 API，是只能获取元素，不能获取 DOM 树。因此拿浏览器里面的 DOM 树是不现实的。
分析:浏览器中，并没有直接提供获取 DOM 树的 API:
因此， 我们无法拿到浏览器内存中的 DOM 树，这条路已经走不通
11.程序员可以手动模拟新旧两棵 DOM 树，来实现对比的需求
12.程序员如何手动模拟 DOM 树?如何模拟一个 DOM 元素；
HTML 不能模拟 DOM 元素，可以使用js对象模拟
说实话，彬哥好帅
比如：
说实话"data-index="0" >
彬哥好帅
//存放 p 标签
哈哈哈
Var div ={
//模拟div对象
tagName: 'div',
//属性赋值
attrs:{
//编号
id: 'mydiv',
//题目
title:说实话，
//日期索引，属性带杠必须引号包裹
'data-index': 'O'
}
//子节点，子元素
childrens; {
彬哥好帅，
}，
//标签名为 p
tagName;'p
//无属性，空对象
attrs:{}
//子节点
childrens:[
哈哈哈”
]
}
}
//元素嵌套通过此类方法实现
id: 'mydiv',
title:说实话123，
'data-index': 'O'
}
childrens; 【
彬哥好帅，
{
tagName;'p
attrs:{}
childrens:{
哈哈哈qqq”
}
}
}
//对比标签名和属性，子节点中的内容对比，使用 DOM 树逐层对比来实现
13.程序员手动模拟的这两棵新旧 DOM 树，就是 React 中虚拟 DOM 的概念:
总结:什么是虚拟 DOM:
用 JS 对象的形式，来模拟页面上 DOM 嵌套关系: (虚拟 DOM 是以 JS 对象的形式存在的: )
React 中虚拟 DOM 的概念：
本质:
用 JS 对象，来模拟 DOM 元素和嵌套关系:
目的:就是为了实现页面元素的高效更新:
例如：
任意一个网页比如说
一个网页呈现的过程:
浏览器请求服务器大取页面 HTML 代码
4、浏览器在现在内存中，解析 DOM 结构，并在浏览器内存中，渲染出一个 DOM树:
浏览器把 DOM 时，呈现到页面上:
二、DOM 和虚拟 DOM 的区别
1.DOM
浏览器中提供的一些概念；用 js 对象，表示页面上的元素，并提供了操作的 api
(1)真实的 DOM 类似于一个文档对象模型，页面上渲染出来的节点都是真实的 DOM
(2)可以直接更新 HTML
(3)元素更新，创建新的 DOM
(4)操作 DOM 比较麻烦，消耗很大的内存
2.虚拟 DOM
是框架中的概念；而是开发框架的程序员，手动用 Js 对象来模拟 DOM元素和嵌套关系的
(1)虚拟 DOM 是以 Javascript 的形式存在来描 述 DOM，创建虚拟 DOM 的目的就是将虚拟 DOM 更好的渲染到页面UI中，它与真实的 DOM 是一一对应的
(2)不可以直接更新 HTML
(3)元素更新，更新 JSX
(4)操作 DOM 方便，消耗少的内存，更新快
3.本质
用JS对象，来模拟 DOM 元素和嵌套关系
4.目的
就是为了实现页面元素的高效更新
