React Fiber

之前几个月抽了点时间对React Fiber架构和Scheduler模块源码进行了大概的梳理，因项目开发一直持续，导致前后过程断断续续的，一直想整理几天篇文章来说下，但也没时间来弄，就贴两张图，把之前梳理的流程展示下。因为时间跨度大，不是在一个固定的React版本上梳理的，和最新的版本可能有差异。因为图太大了，直接浏览的话会很模糊，可以保存下来，走浏览器或者图片阅读器打开。

 

第一张图是从首次渲染到开启调度之前的函数调用过程，版本大概是16.9左右：

PS：在进度调度前的这部分内容是比较好理解的，都集中在初始化工作、数据准备之类的上面，笔者这里按函数调用来画图，更能直观的看到这部分内容干了什么。

第二张图主要以Reconciler和Scheduler模块为主，梳理了任务构建和调度阶段的大致过程，主要是侧重于调度，不包含commit阶段，对Reconciler中的任务构建也没深入细说。

PS：Reconciler负责创建Fiber有关的具体任务（任务实现），并交给Scheduler调度，最终的目的是更新DOM。Scheduler为单纯的调度模块，不仅限于被React体系使用，在与React合作时，主要负责调度Reconciler产品的任务，但它并不关系这个任务具体是干了啥（任务调度）。
在这两个模块中都各自维护了一个workLoop，这两个workLoop配合起来，实现了Fiber架构最核心的功能：任务可中断，解决栈式协调任务多会卡住，影响体验的问题。

 后面如果有时间的话再整理成文章吧。

再次说明：上图都是基于之前老版本源码的，和目前的源码实现可能有很大的差异，比如在2020年5月的PR中，expirationTime的就被lane所替代了，大概率会直接应用到后面的React 17中。目前可中断渲染的API还没有正式发布，仅仅是源码中有这里逻辑了。