源码分析之React中scheduleUpdateOnFiber调度更新解析

概览

scheduleUpdateOnFiber方法是React更新调度系统的核心，负责在Fiber树上调度更新。

源码分析

`scheduleUpdateOnFiber`

在分析scheduleUpdateOnFiber方法之前，先了解其方法内部的几个全局变量：

workInProgressRoot：当前正在工作的根节点
workInProgressSuspendedReason：当不为0时，表示正在进行中的Fiber被挂起或者出错
workInProgressRootRenderLanes：当前渲染的车道（优先级）
workInProgressDeferredLane：延迟的车道
executionContext：描述在React执行栈中的位置
workInProgressRootInterleavedUpdatedLanes：在此渲染过程中（在交错事件中）更新的车道。
workInProgressRootExitStatus：标识root是完成还是挂起或者是出错等

js 复制代码

function scheduleUpdateOnFiber(root, fiber, lane) {
  // 检查当前的循环是否被挂起，等待数据加载  
  if (
    // 是否在渲染阶段已挂起
    (root === workInProgressRoot &&
      (2 === workInProgressSuspendedReason ||
        9 === workInProgressSuspendedReason)) ||
    // 是否在提交阶段挂起    
    null !== root.cancelPendingCommit
  ) {
    // 准备新的工作栈
    prepareFreshStack(root, 0);
    // 标记根节点为挂起状态
    markRootSuspended(
      root,
      workInProgressRootRenderLanes,
      workInProgressDeferredLane,
      !1,
    );
  }
  // 标记根节点有待更新
  markRootUpdated$1(root, lane);
  
  // 判断是否需要立即调度更新：不在渲染上下文或根节点不是当前工作根节点，则需要立即调度更新
  if (0 === (executionContext & 2) || root !== workInProgressRoot) {

    // 若当前根节点是正在工作的根节点
    if (root === workInProgressRoot) {
      
      // 若不在渲染上下文，则将当前更新添加到交错更新车道
      if (0 === (executionContext & 2)) {
        workInProgressRootInterleavedUpdatedLanes |= lane;
      }

      // 若工作根节点已挂起，则标记根节点为挂起状态
      if (4 === workInProgressRootExitStatus) {
        markRootSuspended(
          root,
          workInProgressRootRenderLanes,
          workInProgressDeferredLane,
          !1,
        );
      }
    }
    // 确保根节点被调度，该方法会安排渲染工作
    ensureRootIsScheduled(root);
  }
}

总结

关键点说明：

条件检查阶段 ：函数首先检查是否需要中断当前渲染。如果有挂起（Suspense）或取消提交的情况，会准备新的工作栈。
状态管理：函数处理多种渲染状态，包括挂起、取消、交错更新等复杂情况。
调度决策：根据当前是否在渲染上下文中，以及根节点状态，决定如何调度更新。
优先级处理 ：通过 lane 参数管理不同优先级的更新，这是 React 并发模式的核心。
错误边界 ：处理 Suspense 和错误边界导致的挂起状态，确保应用稳定性。

scheduleUpdateOnFiber函数是 React 更新调度系统的关键部分，负责协调并发渲染、优先级调度和错误处理，确保更新的正确性和性能