React教程第二节之虚拟DOM与Diffing算法理解

1、什么是虚拟DOM

虚拟DOM 是javascript的一个对象，是内存中的一种数据结构，以树的形式存储UI的状态，树中的每个节点都代表着真实的DOM，用来描述我们希望在页面看到的 HTML结构；
现在的MVVM 框架，大多使用虚拟DOM进行数据视图的更新，相比较真实DOM的操作，
操作真实DOM时： DOM属性繁多处理增删改成比较繁琐，处理效率低，会出现重绘回流现象，导致页面更新缓缓卡顿；

原生的DOM也是 js的一个对象，只不过是浏览器提供的对象；
比如在JSX 中写法：

const dom = <h1></h1>
// 对应虚拟DOM：
const dom = {type: 'h1'}
const dom = document.createElement('h1')
-------
const dom = <div className="name">Andy</div>
// 对应的虚拟DOM为：
dom = {type: 'div', props:{ className: 'name', children:'Andy'}}

2、虚拟DOM的用途作用

虚拟DOM主要是为了提升操作更新界面的效率；目前前端流行的前端框架React Vue都是使用虚拟DOM进行更新；但是在一些对于性能要求极高画面绘制精细的应用中，虚拟DOM依然无法满足需求，需要使用更加低级的渲染技术，如：WebGL 或者直接操作DOM；

主要流程：

创建虚拟DOM树：将UI组件转化为虚拟DOM树，来表示UI结构；
A、Diffing算法：
每次更新属性状态时候，会新创建一个虚拟DOM树，并与之前的虚拟DOM树进行对比，找出差异；
B、最小范围更新：
通过 Diffing 算法，React 确定需要更新的 DOM 节点，并只对发生变化的部分进行更新；
C、渲染更新：
React 根据 Diffing 结果，对真实 DOM 进行最小化的更新操作。

3、React 通过Diff 算法如何进行 current process 与 workInProcess 对比的，以及16.8前后版本性能的对比

虚拟DOM的 Diffing 算法是 React 的优化性能核心，通过启发式算法来对比两颗虚拟的 DOM树，最大限度减少对比的计算量；

同层节点对比：
React 只会比较同层的节点，不会跨层对比不同层次的节点。也就是说，如果元素的位置发生了变化，React 会先删除原来的节点，再插入新的节点。

唯一 key 标识：
在处理动态列表时，React 通过 key 属性来区分不同的节点。如果列表中的每个元素都有一个唯一的 key，React 就能高效地找到变化的元素，并只更新该部分。

在React 15之前使用的是递归创建虚拟DOM，递归不能中断，如果层级很深，多导致递归线程占用时间长，阻塞主线程而导致出现卡顿现象；
在 React 16之后为了处理这种不能中断的方式，将更新方案修改为异步的可中断方案，推出Fiber架构，将任务切片分隔异步渲染，根据不同的需求分配不同的优先级进行渲染，支持分批次批量更新；
vue2中使用的是双端对比，即：分别一个从头开始，一个从末尾开始，向中间对比靠拢，在递归的同时会对DOM进行操作；

而React认为实际应用中对于列表翻转，大量重绘重排场景比较少，而是采用双缓存的技术，在React的进程中，最多会同时存在两个Fiber树，当前屏幕看到渲染出来的视图树称为 current fiber树；正在缓存中进行状态属性处理的 树称为 workInProcess fiber树，当 workInProcess fiber 树渲染完成后，应用根节点的 current 指针会指向 workInProcess fiber 树，从而将 workInProcess fiber树更改为 current fiber 树完成一次视图更新渲染；

React 的更新会经历两个阶段：render 阶段 和 commit 阶段。render 阶段是可中断的，commit 阶段是不可中断的。

render 阶段会生成 fiber 树，所谓的 diff 就会发生在这个阶段。React 通过深度优先遍历来生成 fiber 树，整个过程与递归是类似的，因此生成 fiber 树的过程又可以分为「递」阶段和「归」阶段。

commit 阶段主要执行各种 DOM 操作、生命周期钩子、某些 hook 等。

因此，diff 阶段不会直接变更 DOM，而是留到 commit 阶段再做变更

4、虚拟DOM 对比时候的 注意事项，key？

如果列表只是简单的展示，没有增删改查操作，可以使用index作为key值，相反则key值需要是唯一的，否则会使新旧DOM对比时候消耗更多的性能；
如图：key 唯一时候，key 使用index 时候图像对比

使用index 作为key 时候如下图：

使用 唯一标识 作为key 时候

``