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 阶段再做变更