React 18:渲染入口主链路
React 18:渲染入口主链路(简化)
sequenceDiagram
participant User as 用户(调用 API)
participant DOM as ReactDOM
participant Root as FiberRoot / HostRoot Fiber
participant Queue as updateQueue / lanes
participant Sched as Scheduler 调度入口
User->>DOM: createRoot(container)
DOM->>Root: createContainer(ConcurrentRoot)
Root->>Root: createFiberRoot + initializeUpdateQueue
DOM->>DOM: markContainerAsRoot + listenToAllSupportedEvents
DOM-->>User: 返回 root(ReactDOMRoot)
User->>DOM: root.render(element)
DOM->>Root: updateContainer(element, root)
DOM->>Queue: requestEventTime() + requestUpdateLane()
DOM->>Queue: createUpdate(eventTime, lane) + update.payload={element}
DOM->>Queue: enqueueUpdate(HostRootFiber, update, lane)
DOM->>Sched: scheduleUpdateOnFiber(root, hostFiber, lane, eventTime)
DOM->>Sched: ensureRootIsScheduled(root, eventTime)
Sched-->>DOM: 进入并发/同步 render(Day1 Block2)
React 18:渲染入口主链路