React 源码学习（v17.0.2）React 整体执行流程可概括为两个循环：FiberWorkLoop（Fiber

前言

因为去年11月份入职了字节，学习 React 开始写前端~ 考虑到既能提高个人开发效率，又能加深个人技术深度，就开始阅读 React 源码。现网络中已提供的内容不重复编写了，此文提供函数调用流程图示（浓缩了两个月的阅读。。。），以及没有 React 尚未完善的Schedule工作流程，即提供React 宏观执行流程, 具体细节需要读者根据最后的参考文档学习。

简介

实际上，React 整体执行流程可概括为两个循环：FiberWorkLoop（Fiber循环）和 WorkLoop（任务调度循环）。

其中 FiberWorkLoop 包含我们所熟知的构造fiber树，包括beginWork 和 completeWork、提交fiber树，即commitRoot;其中beginWork中划分 mount 和 update 阶段执行不同的操作，如在reconcileChildren函数中(生成workInprogress 的child fiber)，分别执行mountChildFiber 和 reconcileChildFibers 函数

在React v17.0.2中，提供三种模式legacy(同步),blocking 模式(过渡)和 concurrent模式(异步)，主要体现就是在 WorkLoop 中，即任务调度中执行不同的调度方式做区分。而blocking 和 concurrent 仍在实验中，因此React默认提供的legacy模式。而本文也是legacy模式的执行流程。