React中BeginWork和CompleteWork核心解析一、前置认知beginWork 和 completeWork 是 React 调和阶段Reconciliation 的两大核心工作单元基于Fiber架构深度优先遍历执行共同完成[Fiber树构建/更新、Diff算法执行、DOM节点生成、副作用收集]的核心逻辑为提交阶段提供可执行的指令与依赖。调和阶段属于React渲染的可中断、可恢复阶段由Scheduler调度只计算更新结果不操作实际的DOM元素。Fiber 遍历规则先向下执行 beginWork递→ 叶子节点后向上执行completeWork归单节点遍历完成 beginWork 执行完毕 completeWork 执行完毕。二、beginWork 核心解析核心职责Fiber 构建 / 更新 Diff 核心beginWork是[递]阶段的核心方法从根Fiber开始向下遍历为每个Fiber节点执行创建、更新逻辑。核心做以下4件事Fiber节点创建/复用: 根据当前组件类型(类组件、函数组件、原生DOM)创建新的Fiber或复用已有Fiber首屏渲染创建更新阶段则复用Diff算法核心执行更新阶段对比「当前 Fiber」和「新虚拟 DOMpending」计算出节点的增 / 删 / 改差异生成待更新的子 Fiber 节点子Fiber树构建为当前 Fiber 生成 / 更新子 Fiber 节点建立 Fiber 树的父子关联为后续遍历做准备优先级判断结合 Scheduler 优先级机制判断当前 Fiber 节点的更新是否需要中断保证高优先级任务如用户交互优先执行。核心执行逻辑分首屏 / 更新阶段beginWork 会根据当前 Fiber 树的状态首屏渲染 / 更新走不同逻辑核心是区分首次构建和 Diff 更新避免无意义的计算首屏渲染mount无旧 Fiber 节点直接根据虚拟 DOM 创建全新的 Fiber 节点设置节点类型、属性、子节点等信息更新阶段update存在旧 Fiber 节点执行Diff 算法组件级 Diff 元素级 Diff复用可复用的旧 Fiber标记需要删除 / 更新的节点创建新增节点的 Fiber。三、completeWork 核心解析核心职责DOM 生成 副作用收集 属性处理completeWork是「归阶段」的核心方法从 Fiber 树的叶子节点开始向上遍历为每个 Fiber 节点执行收尾工作 **核心做 4 件事真实 DOM 节点生成 / 挂载仅针对原生 DOM 类型 Fiber如 div/span创建真实 DOM 元素设置节点属性className/style/attr 等并将子 DOM 节点挂载到父 DOM 上组件属性 / 上下文处理处理类组件的 props 透传、上下文Context的传递与更新保证组件层级的属性一致性副作用收集将当前 Fiber 节点的更新操作如 DOM 增删改、生命周期执行、useEffect 回调标记为副作用Effect并加入到全局副作用队列中供提交阶段执行Fiber 节点收尾完善 Fiber 节点的附加信息建立 Fiber 与真实 DOM 的映射关系stateNode 属性为后续更新和查找提供依据。关键特性仅原生 DOM Fiber会创建真实 DOM组件类型 Fiber类 / 函数不直接生成 DOM仅做逻辑处理副作用收集是提交阶段执行真实操作的基础调和阶段不执行任何副作用仅标记向上遍历过程中会将子 Fiber 的副作用合并到父 Fiber最终根 Fiber 持有整个应用的所有副作用方便提交阶段统一处理。四、调和过程beginWork completeWork伪代码/** * React 调和阶段核心遍历方法深度优先 * param {Fiber} currentFiber - 旧Fiber节点更新阶段/null首屏渲染 * param {VNode} pendingVNode - 新虚拟DOM节点 * param {number} expirationTime - 任务过期时间Scheduler 优先级 * returns {Fiber} 处理后的新Fiber节点 */functionreconcileFiber(currentFiber,pendingVNode,expirationTime){// 1. 执行 beginWork递阶段 - 构建/更新Fiber Diff逻辑constnextFiberbeginWork(currentFiber,pendingVNode,expirationTime);// 2. 深度优先遍历若有子Fiber递归处理子节点继续递阶段if(nextFiber.child){reconcileFiber(null,nextFiber.child.pendingVNode,expirationTime);}// 3. 执行 completeWork归阶段 - 生成DOM 收集副作用completeWork(nextFiber);returnnextFiber;}/** * beginWork 核心方法递阶段 - Fiber构建/Diff/子树生成 * param {Fiber} current - 旧Fiberupdate/nullmount * param {VNode} vnode - 新虚拟DOM * param {number} expirationTime - 优先级过期时间 * returns {Fiber} 新/更新后的Fiber节点 */functionbeginWork(current,vnode,expirationTime){letnextFiber;const{type,props}vnode;// 核心职责1判断更新类型 - 首屏(mount) / 更新(update)constisMount!current;if(isMount){// 首屏渲染核心职责2 - 创建全新Fiber节点nextFibercreateFiber(vnode,expirationTime);}else{// 更新阶段核心职责3 - 执行Diff算法复用/更新旧FibernextFiberreconcileUpdate(current,vnode,expirationTime);}// 核心职责4构建子Fiber树 - 生成子节点Fiber建立父子关联nextFiber.childcreateChildFibers(nextFiber,props.children,expirationTime);// 核心职责5优先级判断 - 若有更高优先级任务标记中断if(shouldYield(expirationTime)){markWorkInProgress(nextFiber);// 标记为进行中后续可恢复}returnnextFiber;}/** * completeWork 核心方法归阶段 - DOM生成/副作用收集/属性处理 * param {Fiber} fiber - 已完成beginWork的Fiber节点 */functioncompleteWork(fiber){const{type,props,stateNode}fiber;constisHostComponentisHostDOMType(type);// 是否为原生DOM组件div/span等// 核心职责1原生DOM组件 - 生成/更新真实DOM节点if(isHostComponent){if(!stateNode){// 首屏创建真实DOM挂载到Fiber的stateNodeFiber-DOM映射fiber.stateNodecreateDOMElement(type,props);}else{// 更新执行DOM属性Diff更新已有DOM避免全量替换updateDOMAttributes(stateNode,props);}// 核心职责2将子DOM节点挂载到当前父DOM归阶段向上子DOM已生成appendChildDOM(fiber.stateNode,fiber.child?.stateNode);}// 核心职责3处理组件上下文/属性透传类组件/ContextpropagateContext(fiber);resolveProps(fiber);// 核心职责4收集副作用 - 根据Fiber状态标记对应的EffectDOM增/删/改/生命周期等if(hasSideEffect(fiber)){collectEffect(fiber,fiber.effectTag);// 加入全局副作用队列}// 核心职责5Fiber收尾 - 合并子Fiber的副作用向上传递if(fiber.sibling){fiber.return.effectsmergeEffects(fiber.return.effects,fiber.effects);}}// 判断是否为原生DOM类型组件functionisHostDOMType(type){returntypeoftypestring[div,span,p,input].includes(type);}// 判断是否需要中断Scheduler 时间切片/高优先级抢占functionshouldYield(expirationTime){returnperformance.now()expirationTime||hasHigherPriorityWork();}五、核心职责标注分阶段 / 分方法1. beginWork递阶段核心职责职责编号具体职责适用场景核心目的1区分首屏 (mount)/ 更新 (update)所有 Fiber 节点避免无意义的 DOM 操作 / Diff 计算2首屏渲染创建全新 Fiber 节点mount 阶段构建初始 Fiber 树3更新阶段执行 Diff 算法update 阶段计算节点增 / 删 / 改差异4生成子 Fiber 节点构建子树所有 Fiber 节点为深度优先遍历提供后续节点5优先级判断与工作中断标记所有 Fiber 节点适配 Scheduler 可中断调度2. completeWork归阶段核心职责职责编号具体职责适用场景核心目的1原生 DOM 组件创建真实 DOM宿主组件div/span 等映射 Fiber 到真实 DOM2原生 DOM 组件更新属性 / Diff宿主组件 update 阶段最小化 DOM 操作3子 DOM 节点挂载到父 DOM宿主组件构建完整的真实 DOM 树4处理 Context/Props 透传类组件 / Context 相关保证组件层级数据一致性5收集当前 Fiber 的副作用有更新的 Fiber 节点为 Commit 阶段提供执行指令6合并子 Fiber 副作用并向上传递非叶子节点 Fiber根 Fiber 统一管理所有副作用六、关键执行流程深度优先遍历示例以简单 DOM 结构divpReact/p/div为例展示 beginWork completeWork 的执行顺序核心规律先父后子执行 beginWork先子后父执行 completeWork叶子节点是第一个完成 beginWork completeWork 的节点。七、与 Fiber 架构 / 调度器的关联可中断性beginWork 执行过程中若 Scheduler 判定需要中断如 5ms 时间切片到期、高优先级任务抢占会立即停止遍历将当前未完成的 Fiber 标记为「工作中」后续恢复时从该节点继续执行副作用隔离调和阶段仅在 completeWork 中收集副作用不执行任何真实操作如 DOM 修改、生命周期调用所有副作用统一在 Commit 阶段执行保证更新的原子性Fiber 映射completeWork 为原生 DOM Fiber 建立 stateNode 映射Fiber.stateNode 真实 DOM这是 React 后续操作 DOM 的核心依据也是 Diff 算法能精准更新的基础。