React 核心深度解析

1
// 并发调度工作循环
2
// 注：源码中还有 workLoopConcurrent、workLoopSync 等变体
3
function workLoopConcurrentByScheduler() {
4
  // 持续执行直到 Scheduler 要求让出主线程
5
  while (workInProgress !== null && !shouldYield()) {
6
    performUnitOfWork(workInProgress)
7
  }
8
}
9

10
// 执行单个 Fiber 节点的工作单元
11
function performUnitOfWork(unitOfWork: Fiber) {
12
  const current = unitOfWork.alternate
13
  let next = beginWork(current, unitOfWork, entangledRenderLanes)
14

15
  if (next === null) {
16
    // 没有子节点，完成当前节点
17
    completeUnitOfWork(unitOfWork)
18
  } else {
19
    // 有子节点，继续处理子节点
20
    workInProgress = next
21
  }
22
}
23

24
// 完成单个 Fiber 节点的处理，并寻找下一个待处理节点
25
function completeUnitOfWork(unitOfWork: Fiber) {
26
  let completedWork = unitOfWork
27
  do {
28
    const current = completedWork.alternate
29

30
    // 调用 completeWork 完成当前节点的收尾工作
31
    // 返回下一个要处理的 Fiber（第一个子节点）
32
    const next = completeWork(current, completedWork, renderLanes)
33

34
    if (next !== null) {
35
      workInProgress = next
36
      return
37
    }
38

39
    // 如果没有子节点，检查是否有兄弟节点
40
    if (completedWork.sibling !== null) {
41
      workInProgress = completedWork.sibling
42
      return
43
    }
44

45
    // 没有兄弟节点，回到父节点
46
    completedWork = completedWork.return
47
    workInProgress = completedWork
48
  } while (completedWork !== null)
49

50
  // 回到根节点，整个 Render 阶段完成
51
  if (workInProgressRootExitStatus === RootInProgress) {
52
    workInProgressRootExitStatus = RootCompleted
53
  }
54
}

1
function beginWork(
2
  current: Fiber | null, // 上一次渲染时的 Fiber 节点（如果存在），用于进行对比
3
  workInProgress: Fiber, // 当前正在处理的 Fiber 节点（本次渲染的副本）
4
  renderLanes: Lanes,    // 当前渲染的优先级车道（Lanes 模型）
5
): Fiber | null /* 返回下一个要处理的 Fiber 节点，如果没有则返回 null */ {
6
  // current 不为 null 表示这是一个更新（而非首次挂载）
7
  if (current !== null) {
8
    // 删减...
9
    // 此分支中，主要做两件事：
10
    // 1. 如果 props/context 未变化，且没有待处理的更新，则调用 `attemptEarlyBailoutIfNoScheduledUpdate`，
11
    //    复用旧节点，直接跳到【返回子节点】
12
    // 2. 检测是否需要各种条件，确定是否需要标记该 Fiber 需要执行更新，即 `didReceiveUpdate` 的值是否设置为 `true`
13
    // 删减...
14
    }
15
  }
16
  // current 为 null 表示这是首次渲染（mount）
17
  else {
18
    // 首次渲染，自然没有接收到更新
19
    didReceiveUpdate = false;
20
  }
21

22
  // 在进入 begin 阶段之前，清除待处理的更新优先级
23
  workInProgress.lanes = NoLanes;
24

25
  // 根据 Fiber 节点的 tag（类型）执行不同的更新逻辑（每个 case 对应一种 React 组件类型或节点类型）
26
  switch (workInProgress.tag) {
27
    // 以函数式组件为例子
28
    case FunctionComponent: {
29
      const Component = workInProgress.type;
30

31
      // 调用 `updateFunctionComponent(...)` 内部执行：
32
      // │
33
      // ├── nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes)
34
      // │
35
      // ├── reconcileChildren(current, workInProgress, nextChildren, renderLanes)  // Diff 算法的入口
36
      // │   ├── 是首次渲染 -> workInProgress.child = mountChildFibers()             // 直接创建子 Fiber
37
      // │   └── 是更新渲染 -> workInProgress.child = reconcileChildFibers()         // 核心 Diff 逻辑
38
      // │                   ├── 对比旧的子 Fiber 链表和新的 ReactElement 树
39
      // │                   ├── 生成新的子 Fiber 链表
40
      // │                   └── 标记需要插入、删除、移动的副作用 (Flags)
41
      // │
42
      // └── return workInProgress.child                                            // 返回子 Fiber 或 null
43
      return updateFunctionComponent(
44
        current,
45
        workInProgress,
46
        Component,                        // 函数组件本身
47
        workInProgress.pendingProps,      // 传入的 props
48
        renderLanes,
49
      );
50
    }
51
    // 略过以下分支（参考函数式组件）：
52
    // LazyComponent、ClassComponent、HostRoot、HostHoistable、HostSingleton、HostComponent、HostText、SuspenseComponent、
53
    // HostPortal、ForwardRef、Fragment、Mode、Profiler、ContextProvider、ContextConsumer、MemoComponent、SimpleMemoComponent、
54
    // IncompleteClassComponent、IncompleteFunctionComponent、SuspenseListComponent、ScopeComponent、ActivityComponent、
55
    // OffscreenComponent、LegacyHiddenComponent、CacheComponent、TracingMarkerComponent、ViewTransitionComponent、Throw
56
  }
57
  throw new Error(/*删减*/)
58
}

1
// 完成 Fiber 节点处理
2
function completeWork(
3
  current: Fiber | null,
4
  workInProgress: Fiber,
5
  renderLanes: Lanes,
6
): Fiber | null {
7
  // 根据 Fiber 类型执行对应的完成逻辑
8
  switch (workInProgress.tag) {
9
    case FunctionComponent:
10
    case Fragment:
11
      // 函数组件和 Fragment 主要执行属性冒泡
12
      bubbleProperties(workInProgress)
13
      return null
14

15
    case ClassComponent:
16
      // 类组件：弹出 legacy context，然后冒泡属性
17
      popLegacyContext(workInProgress)
18
      bubbleProperties(workInProgress)
19
      return null
20

21
    case HostComponent: {
22
      // 原生 DOM 节点
23
      // 1. 创建或更新 DOM 实例
24
      const instance = createInstance(workInProgress.type, newProps)
25
      workInProgress.stateNode = instance
26

27
      // 2. 处理 DOM 属性
28
      finalizeInitialChildren(instance, workInProgress.type, newProps)
29

30
      // 3. 冒泡子节点的副作用
31
      bubbleProperties(workInProgress)
32
      return null
33
    }
34

35
    case HostText: {
36
      // 文本节点
37
      const newText = newProps
38
      workInProgress.stateNode = createTextInstance(newText)
39
      return null
40
    }
41
    // 其他 case...
42
  }
43
}

1
// 经过精简调整
2

3
const NoPriority = 0
4
const ImmediatePriority = 1    // 立即超时，必须同步执行（如受控组件的同步更新）
5
const UserBlockingPriority = 2 // 用户交互触发，250ms 超时（如点击、输入）
6
const NormalPriority = 3       // 普通更新，5000ms 超时（如数据请求后的渲染）
7
const LowPriority = 4          // 低优先级更新，10000ms 超时（如非关键数据的预加载）
8
const IdlePriority = 5         // 空闲时执行，2^31-1ms 超时（几乎永不执行）
9

10
// packages/scheduler/src/forks/Scheduler.js
11
const frameInterval = 5        // 单个时间片的最大执行时间（ms）
12
let taskQueue = []             // 任务队列：最小二叉堆，按 sortIndex（即 expirationTime）排序
13
let currentTask = null         // 当前正在执行的任务
14
let startTime = -1             // 当前时间片的开始时间
15
let isHostCallbackScheduled = false
16
let isMessageLoopRunning = false
17

18
// 1. 核心入口：添加指定优先级的任务
19
// 最终会在协调器的 ensureRootIsScheduled 中被调用
20
//（packages/react-reconciler/src/ReactFiberRootScheduler.js）
21
// 衔接协调器的 performWorkOnRoot
22
// 注：实际实现使用双队列（timerQueue 延迟队列 + taskQueue 就绪队列）
23
//     此处仅使用 taskQueue 说明，不影响理解
24
function unstable_scheduleCallback(priorityLevel, callback) {
25
  const currentTime = getCurrentTime()
26

27
  // React 任务调度的优先级通过不同超时时间体现
28
  // 调度器采用”超时优先”策略：任务一旦过期（高优先级任务易过期），
29
  // 则忽略时间片限制，必须同步执行。这是优先级的兜底保障。
30
  var timeout
31
  switch (priorityLevel) {
32
    case ImmediatePriority:
33
      // 立即超时
34
      timeout = -1
35
      break
36
    case UserBlockingPriority:
37
      // 用户交互需尽快响应，设置较短超时
38
      timeout = userBlockingPriorityTimeout // 250
39
      break
40
    case IdlePriority:
41
      // 空闲时执行，超时时间极长
42
      timeout = maxSigned31BitInt // 1073741823
43
      break
44
    case LowPriority:
45
      // 低优先级，超时时间较长
46
      timeout = lowPriorityTimeout
47
      break
48
    case NormalPriority:
49
    default:
50
      // 普通优先级
51
      timeout = normalPriorityTimeout
52
      break
53
  }
54

55
  // 创建任务对象
56
  const newTask = {
57
    id: taskIdCounter++,
58
    callback,                    // 协调器注册的更新入口：performWorkOnRoot
59
    priorityLevel,               // 优先级
60
    startTime: currentTime,      // 开始时间
61
    expirationTime: currentTime + timeout,  // 过期时间
62
    sortIndex: currentTime + timeout,       // 最小堆排序依据
63
  }
64

65
  // 插入最小二叉堆（O(log n) 时间复杂度）
66
  // 高优先级任务排在堆顶，被优先执行
67
  push(taskQueue, newTask)
68

69
  // 若当前无正在调度的任务，启动调度
70
  if (!isHostCallbackScheduled) {
71
    isHostCallbackScheduled = true
72
    requestHostCallback()
73
  }
74
  return newTask
75
}
76

77
// 2. 启动调度：优先使用 MessageChannel
78
function requestHostCallback() {
79
  if (!isMessageLoopRunning) {
80
    isMessageLoopRunning = true
81
    // schedulePerformWorkUntilDeadline 是 performWorkUntilDeadline 的包裹
82
    // 优先使用 MessageChannel（无 4ms 最小延迟），不支持则降级到 setTimeout/setImmediate（Node.js）
83
    schedulePerformWorkUntilDeadline()
84
  }
85
}
86

87
// 3. 执行任务直到时间片耗尽
88
function performWorkUntilDeadline() {
89
  if (isMessageLoopRunning) {
90
    const currentTime = getCurrentTime()
91
    // 记录开始时间，用于测量主线程阻塞时长
92
    startTime = currentTime
93

94
    let hasMoreWork = true
95
    try {
96
      // flushWork 内部调用 workLoop 执行任务
97
      // workLoop 返回是否还有剩余工作
98
      hasMoreWork = flushWork(currentTime)
99
    } finally {
100
      if (hasMoreWork) {
101
        // 仍有工作，继续调度
102
        schedulePerformWorkUntilDeadline()
103
      } else {
104
        isMessageLoopRunning = false
105
      }
106
    }
107
  }
108
}
109

110
// 4. 调度工作循环：取出任务并执行
111
function workLoop(initialTime: number) {
112
  let currentTime = initialTime
113

114
  currentTask = peek(taskQueue) // 从最小堆取出最高优先级任务（O(1) 时间复杂度）
115
  while (currentTask !== null) {
116
    // 检查是否应该让出主线程
117
    // 注意：expirationTime 是任务优先级的体现
118
    // 高优先级任务超时时间短，一旦超时就不能让出主线程，必须立即处理
119
    if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
120
      // 当前任务未过期且时间片已用完，暂停执行
121
      break
122
    }
123

124
    // 执行任务回调
125
    const callback = currentTask.callback
126
    if (typeof callback === 'function') {
127
      currentTask.callback = null
128
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime
129

130
      // 执行任务（协调器的 performWorkOnRoot）
131
      const continuationCallback = callback(didUserCallbackTimeout)
132
      currentTime = getCurrentTime()
133

134
      // 若任务返回回调，说明任务被中断
135
      if (typeof continuationCallback === 'function') {
136
        currentTask.callback = continuationCallback
137
      } else {
138
        // 任务完成，从队列移除
139
        pop(taskQueue)
140
      }
141
    } else {
142
      pop(taskQueue)
143
    }
144

145
    currentTask = peek(taskQueue)
146
  }
147

148
  if (currentTask !== null) {
149
    // 仍有未完成任务，时间片已耗尽
150
    return true
151
  } else {
152
    // 全部完成
153
    return false
154
  }
155
}
156

157
// 检查是否应该让出主线程
158
function shouldYieldToHost() {
159
  // 实验性 API：配合 requestPostAnimationFrame，避免在绘制前执行 JS
160
  if (enableRequestPaint && needsPaint) {
161
    return true
162
  }
163
  const timeElapsed = getCurrentTime() - startTime
164
  if (timeElapsed < frameInterval) {
165
    // 占用主线程时间较短，可继续执行
166
    return false
167
  }
168
  // 时间片已用完，需让出主线程
169
  return true
170
}

1
// 简化后的核心逻辑
2
function reconcileSingleElement(
3
  returnFiber: Fiber,
4
  currentFirstChild: Fiber | null,
5
  element: ReactElement,
6
  lanes: Lanes
7
): Fiber {
8
  const key = element.key
9
  let child = currentFirstChild
10

11
  // 遍历 current 的子节点，查找可复用的节点
12
  while (child !== null) {
13
    if (child.key === key) {
14
      const elementType = element.type
15

16
      // 特殊处理 Fragment
17
      if (elementType === REACT_FRAGMENT_TYPE) {
18
        if (child.tag === Fragment) {
19
          deleteRemainingChildren(returnFiber, child.sibling)
20
          const existing = useFiber(child, element.props.children)
21
          existing.return = returnFiber
22
          return existing
23
        }
24
      } else {
25
        // 普通 element：比较 elementType
26
        if (
27
          child.elementType === elementType ||
28
          // 懒加载组件的特殊处理
29
          (enableLazyElements &&
30
            typeof elementType === 'object' &&
31
            elementType !== null &&
32
            elementType.$$typeof === REACT_LAZY_TYPE &&
33
            resolveLazy(elementType) === child.type)
34
        ) {
35
          deleteRemainingChildren(returnFiber, child.sibling)
36
          const existing = useFiber(child, element.props)
37
          existing.return = returnFiber
38
          return existing
39
        }
40
      }
41

42
      // key 相同但 type 不同，删除所有剩余旧节点（不同类型无法复用 DOM）
43
      deleteRemainingChildren(returnFiber, child)
44
      break
45
    } else {
46
      // key 不同，删除当前节点，继续遍历兄弟节点
47
      deleteChild(returnFiber, child)
48
    }
49
    child = child.sibling
50
  }
51

52
  // 未找到可复用节点，创建新的 Fiber 节点
53
  if (element.type === REACT_FRAGMENT_TYPE) {
54
    const created = createFiberFromFragment(
55
      element.props.children,
56
      returnFiber.mode,
57
      lanes,
58
      element.key
59
    )
60
    created.return = returnFiber
61
    return created
62
  } else {
63
    const created = createFiberFromElement(element, returnFiber.mode, lanes)
64
    created.return = returnFiber
65
    return created
66
  }
67
}

1
function reconcileChildrenArray(
2
  returnFiber: Fiber,
3
  currentFirstChild: Fiber | null,
4
  newChildren: Array<any>,
5
  lanes: Lanes
6
): Fiber | null {
7
  let resultingFirstChild: Fiber | null = null
8
  let previousNewFiber: Fiber | null = null
9

10
  let oldFiber = currentFirstChild
11
  let lastPlacedIndex = 0
12
  let newIdx = 0
13
  let nextOldFiber = null
14

15
  // 第一轮遍历：处理更新的节点
16
  // 从左到右按 index 比较，直到遇到 key 不匹配的节点
17
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
18
    if (oldFiber.index > newIdx) {
19
      // 旧节点的 index 已超过新节点 index
20
      nextOldFiber = oldFiber
21
      oldFiber = null
22
    } else {
23
      nextOldFiber = oldFiber.sibling
24
    }
25

26
    const newFiber = updateSlot(
27
      returnFiber,
28
      oldFiber,
29
      newChildren[newIdx],
30
      lanes
31
    )
32

33
    if (newFiber === null) {
34
      // key 不匹配，跳出第一轮遍历
35
      if (oldFiber === null) {
36
        oldFiber = nextOldFiber
37
      }
38
      break
39
    }
40

41
    // 处理新节点复用旧节点的情况
42
    if (shouldTrackSideEffects) {
43
      if (oldFiber && newFiber.alternate === null) {
44
        // 匹配了 slot 但未复用 fiber，删除旧节点
45
        deleteChild(returnFiber, oldFiber)
46
      }
47
    }
48

49
    // placeChild 会更新 lastPlacedIndex，并判断是否需要移动
50
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)
51

52
    // 构建新的 Fiber 链表
53
    if (previousNewFiber === null) {
54
      resultingFirstChild = newFiber
55
    } else {
56
      previousNewFiber.sibling = newFiber
57
    }
58
    previousNewFiber = newFiber
59
    oldFiber = nextOldFiber
60
  }
61

62
  // 第二轮遍历：处理剩余节点
63
  if (newIdx === newChildren.length) {
64
    // 新节点已遍历完，删除剩余旧节点
65
    deleteRemainingChildren(returnFiber, oldFiber)
66
    return resultingFirstChild
67
  }
68

69
  if (oldFiber === null) {
70
    // 旧节点已遍历完，剩余节点作为新节点插入
71
    for (; newIdx < newChildren.length; newIdx++) {
72
      const newFiber = createChild(returnFiber, newChildren[newIdx], lanes)
73
      if (newFiber === null) {
74
        continue
75
      }
76
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)
77
      if (previousNewFiber === null) {
78
        resultingFirstChild = newFiber
79
      } else {
80
        previousNewFiber.sibling = newFiber
81
      }
82
      previousNewFiber = newFiber
83
    }
84
    return resultingFirstChild
85
  }
86

87
  // 新旧节点都有剩余，将旧节点转为 Map（key → Fiber），O(1) 查找
88
  const existingChildren = mapRemainingChildren(oldFiber)
89

90
  for (; newIdx < newChildren.length; newIdx++) {
91
    // 从 existingChildren 中查找可复用的节点
92
    const newFiber = updateFromMap(
93
      existingChildren,
94
      returnFiber,
95
      newIdx,
96
      newChildren[newIdx],
97
      lanes
98
    )
99

100
    if (newFiber !== null) {
101
      if (shouldTrackSideEffects) {
102
        const currentFiber = newFiber.alternate
103
        if (currentFiber !== null) {
104
          // 复用了旧 fiber，从 Map 中删除（避免重复复用）
105
          existingChildren.delete(
106
            currentFiber.key === null ? newIdx : currentFiber.key
107
          )
108
        }
109
      }
110

111
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)
112
      if (previousNewFiber === null) {
113
        resultingFirstChild = newFiber
114
      } else {
115
        previousNewFiber.sibling = newFiber
116
      }
117
      previousNewFiber = newFiber
118
    }
119
  }
120

121
  // 删除未被复用的旧节点
122
  if (shouldTrackSideEffects) {
123
    existingChildren.forEach(child => deleteChild(returnFiber, child))
124
  }
125

126
  return resultingFirstChild
127
}
128

129
// 放置子节点：判断节点是否需要移动，并更新 lastPlacedIndex
130
// 返回值：更新后的 lastPlacedIndex
131
function placeChild(
132
  newFiber: Fiber,          // 新创建或复用的 Fiber 节点
133
  lastPlacedIndex: number,   // 上一个不需要移动的节点的 index
134
  newIndex: number,          // 当前节点的新 index
135
): number {
136
  // 设置新 fiber 的 index
137
  newFiber.index = newIndex
138

139
  if (!shouldTrackSideEffects) {
140
    // SSR hydration 场景：不需要追踪副作用
141
    // 标记为 Forked，表示这是列表中的节点（用于 useId 算法）
142
    newFiber.flags |= Forked
143
    return lastPlacedIndex
144
  }
145

146
  const current = newFiber.alternate
147
  if (current !== null) {
148
    // 复用了旧节点，检查是否需要移动
149
    const oldIndex = current.index
150

151
    if (oldIndex < lastPlacedIndex) {
152
      // 旧 index 小于 lastPlacedIndex，需要移动
153
      // 例如：A(0), B(1), C(2) → A, C, B
154
      //   A: lastPlacedIndex = 0
155
      //   C: oldIndex=2 > 0，不移动，lastPlacedIndex = 2
156
      //   B: oldIndex=1 < 2，需要移动
157
      newFiber.flags |= Placement | PlacementDEV
158
      return lastPlacedIndex
159
    } else {
160
      // 不需要移动，更新 lastPlacedIndex 为当前 index
161
      return oldIndex
162
    }
163
  } else {
164
    // 新插入的节点，标记为 Placement
165
    newFiber.flags |= Placement | PlacementDEV
166
    return lastPlacedIndex
167
  }
168
}