虚拟 DOM在React中有个正式的称呼——Fiber。

Fiber 的起源

最早的Fiber官方解释来源于2016 年 React 团队成员 Acdlite 的一篇介绍 (opens in a new tab)。

从上一章我们知道：

在React15及以前，Reconciler采用递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。

为了解决这个问题，React16将递归的无法中断的更新重构为异步的可中断更新，由于曾经用于递归的虚拟 DOM数据结构已经无法满足需要。于是，全新的Fiber架构应运而生。

Fiber 的含义

Fiber包含三层含义：

1. 作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。

2. 作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件...）、对应的 DOM 节点等信息。

3. 作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新...）。

Fiber 架构说白了就是把虚拟 DOM 用了链表来组织，然后把处理每一级链表的任务交给了并发模式，浏览器进程有空了就处理交付的链表。