一文让你了解React的整体运行流程,拿下React源码

500 阅读3分钟

简述React的整体运行流程

内容为简易之后的版本,方便刚开始学习React源码的同学在心中有大概的架构体系,并易于阅读和学习。


递与归

其实React的流程可以分为递和归两个阶段,递阶段从ensureRootIsScheduled为入口,也是schedule阶段的入口,新版本的React的整体流程大致分为三大阶段:Scheduler(调度器)Reconciler(协调器)Renderer(渲染器)

Scheduler、Reconciler、Render做了什么?

  • Scheduler(调度器):将任务根据优先级进行执行,高优任务存到Reconciler(协调器)中进行下一阶段的执行
  • Reconciler(协调器):可以类比于Vue的Diff阶段,为任务打上不同类型的workTag,比如Placement、Deletion等代表单节点或者多节点的移动、插入、删除操作。
  • Renderer(渲染器):渲染到页面上

ensureRootIsScheduled方法

ensureRootIsScheduled方法是schedule阶段的入口,具体进行如下操作

  1. 通过getHighestPriorityLane方法获取优先级,并对获取到的优先级进行判断,相等则表示当前没有需要更新的任务
  2. 将上一步的优先级与同步优先级进行判断是否相等,如果相等用微任务调度,否则用宏任务调度
  3. 宏微任务的回调都会先进行入队操作,并等待执行

performConcurrentWorkOnRoot

这是流程的第二步,该方法接收根节点作为参数,并进行如下操作

  1. 获取当前root的优先级,并进行判断,如果优先级比同步优先级低,则重新执行ensureRootIsScheduled方法
  2. 接下来执行renderRoot方法

renderRoot

  1. 该方法会通过调用prepareFreshStack方法进行初始化,prepareFreshStack方法会为root赋值初始优先级并创建对应的workInProgress(备用的fiber节点,为双缓存做准备)具体可以去查阅相关资料
  2. 根据是否需要进行时间切片的判断,来执行并发或同步模式
  3. 但都会执行一个方法performUnitOfWork方法

performUnitOfWork

  1. 一切工作准备就绪后,通过调用beginWork方法来进行fiber节点的一系列reconcile操作
  2. beginWork方法是根据workInProgress.tag属性(后文称为wip)进行对应的update操作,并调用reconcileChildren方法,最后执行ChildReconciler方法实现fiber节点的diff与副作用的追踪,在其中还会执行processUpdateQueue方法,将即将发生的更新连成一个环形链表并根据优先级进行执行
  3. 最后执行completeUnitOfWork方法也就是归流程,合并更新属性,构建DOM实例渲染页面

最后

其实React的整体流程并不复杂,大部分复杂的工作都在调度阶段,协调阶段做的事很简单,简化过后的react源码会方便阅读很多,提取了主要的功能代码,其文中涉及到的知识点,会留到以后再开文章讲,如果文中有某些纰漏欢迎指正