一，概述
在 React 16 之前，VirtualDOM 的更新过程是采用 Stack 架构实现的，也就是循环递归方式。这种对比方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，Virtual DOM 的层级就会比较深。如果主线程被长期占用，就会阻塞渲染，造成卡顿。为了避免这种情况，需要执行更新操作时不能超过16ms，如果超过16ms，就需要先暂停，让给浏览器进行渲染操作，后续再继续执行更新计算。
而Fiber架构就是为了支持“可中断渲染”而创建的。在React中，fiber tree是一种数据结构，它可以把虚拟dom tree转换成一个链表，从而可以在执行遍历操作时支持断点重启，示意图如下。
二、Fiber原理
Fiber 可以理解为是一个执行单元，也可以理解为是一种数据结构。
2.1 一个执行单元
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，react 就会检查现在还剩多少时间，如果没有时间则将控制权让出去。React Fiber 与浏览器的核心交互流程如下图：
可以看到，React 首先向浏览器请求调度，浏览器在一帧中如果还有空闲时间，会去
本文同步分享在 博客“xiangzhihong8”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
