React v-Dom & diff 算法介绍

Question

# React@15
DOM: 真实 DOM 节点
-------
Instances: React 维护的 VDOM tree node
-------
Elements: 描述 UI 长什么样子（type, props）

更新主要分为两个步骤完成：

• diff: diff 的实际工作是对比 prevInstance 和 nextInstance 的状态，找出差异及其对应的 VDOM change。diff 本质上是一些计算（递归遍历、比较）。
• patch: 将 diff 算法计算出来的差异队列更新到真实的 DOM 节点上。React 并不是计算出一个差异就执行一次 patch，而是计算出全部的差异并放入差异队列后，再一次性的去执行 patch 方法完成真实的DOM更新。

Fiber@16 之前的 reconciler（被称为 Stack reconciler）自顶向下的递归 mount/update，无法中断（持续占用主线程），这样主线程上的布局、动画等周期性任务以及交互响应就无法立即得到处理，影响体验。