首页  思维导图  详情

react执行流程

2025-08-01 11:38:17   1  举报





AI智能生成

react源码执行流程

代码分析

作者其他创作

大纲/内容

首次渲染

创建fiberRoot根节点 createRoot(container: Container)

通过map来判断当前是否是首次更新 containerToRoot

非首次更新，则创建fiberRoot节点，将节点加入map root = createContainer(container)   containerToRoot.set(container, root)

创建首个rootFiber子节点，也就是current fiber hostRootFiber = new FiberNode(HostRoot, {}, null)

子主题

创建fiberRoot节点，同时挂载上子节点rootFiber和容器DOM root = new FiberRootNode(container, hostRootFiber)

fiberRoot的pendingPassiveEffects对象保存了unmount和update两个副作用队列 fiberRoot的finishedWork保存了已完成任务的fiber节点 fiberRoot的pendingLanes保存了未执行的lane集合 fiberRoot的finishedLanes保存了本轮更新执行的lane

创建更新队列updateQueue，将更新队列挂载到rootFiber上 hostRootFiber.updateQueue = createUpdateQueue<ReactElement>()

返回一个对象，对象有render子节点的方法render和卸载当前节点的方法unmount

调用fiberRoot的render方法，开始渲染<APP/>子节点

初始化节点信息 // 实例   this.tag = tag;   this.key = key;   this.stateNode = null;   this.type = null;   // 树结构   this.return = null;   this.sibling = null;   this.child = null;   this.index = 0;   this.ref = null;   // 状态   this.pendingProps = pendingProps;   this.memoizedProps = null;   this.updateQueue = null;   this.memoizedState = null;   // 副作用   this.flags = NoFlags;   this.subtreeFlags = NoFlags;   this.deletions = null;   // 调度   this.lanes = NoLane;   // this.childLanes = NoLanes;   this.alternate = null;

babel编译JSX并执行，返回ReactElement对象

将生成element传入fiberRoot的render函数，开始渲染 render(element: ReactElement)

清空上次渲染后容器DOM下的对象 clearContainerDOM(container)

初始化事件委托，将dispatchEvent绑定到容器DOM上 initEvent(container, 'click')

更新容器 （包括创建wip rootFiber、创建更新对象、append更新对象、向上冒泡lane优先级、以当前lane优先级调度任务） return updateContainer(element, root)

创建wip rootFiber

根据传入elment创建更新对象update，优先级设置为SyncLane（首次更新，优先级最高）

将更新对象添加到更新队列

将之前保存的更新队列链表断开，将新加入的更新对象接入，然后再接上链表首尾，成为新的环状链表

在当前fiber节点上，开始调度更新 scheduleUpdateOnFiber(fiber: FiberNode, lane: Lane)

合并fiber以前的lane和新的lane，然后冒泡到fiberRoot上（方便后续调度lane优先级） markUpdateLaneFromFiberToRoot(fiber: FiberNode, lane: Lane)

合并当前fiber以前的lane和此时传入的新lane（按位或）

向上返回直到rootFiber，然后返回rootFiber.stateNode，也就是fiberRoot

合并新的lane到fiberRoot的pendingLanes上 markRootUpdated(root, lane)

在fiberRoot上，以冒泡上来的新的lane优先级调度任务 ensureRootIsScheduled(root)

获取fiberRoot.pendingLanes上优先级最高的lane updateLane = getHighestPriorityLane(root.pendingLanes)

如果优先级的lane优先级为Nolane，直接返回

如果优先级最高的lane优先级为SyncLane，则在微任务中调度该优先级

传入同步任务回调函数，并调度同步任务回调函数。 scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root, updateLane)) （同步任务回调函数就是以当前lane优先级同步执行工作循环performSyncWorkOnRoot.bind(null, root, updateLane)）

如果同步更新队列为空则初始化队列，加入任务回调函数

如果同步更新队列不为空，则直接push新的任务回调函数

调度微任务，传入flushSyncCallbacks scheduleMicrotask(flushSyncCallbacks)

返回传入的element

首次挂载时，将根节点的更新任务以最高优先级添加到更新队列中， 然后将工作循环函数作为回调函数添加到requestAnimationFrame中， 然后浏览器会自动调用回调 performSyncWorkOnRoot.bind(null, root, updateLane)）

为后续更新做准备工作，例如创建wip，获取优先级 prepareFreshStack(root: FiberRootNode, lane: Lane)

复用旧节点current来创建wip节点 createWorkInProgress = (current, pendingProps)

如果有旧节点则复用旧节点的 pendingProps、subtreeFlags、deletions、type等信息

没有旧节点则新建一个，然后将current和wip通过alternate相互指向

将旧current节点上的updateQueue、flags、child、memoizedProps、memoizedStates、lane赋值到wip上

返回wip

用WorkInProgressRootRenderLane保持当前的lane优先级

循环调用workLoop workLoop()

当wip不为空时循环执行performUnitOfWork(workInProgress)

向下递归协调子节点 next = beginWork(fiber, workInProgressRootRenderLane)

将当前节点的优先级初试为0 workInProgress.lanes = NoLane

根据wip的tag类型switch调用不同的更函数

HostRoot(rootFiber) 执行updateHostRoot(workInProgress, renderLane)

以当前lane优先级调用更新队列，获得最新的baseState workInProgress.memoizedState = processUpdateQueue(   baseState,   updateQueue,   workInProgress,   renderLane  );

如果旧的节点上的更新队列不为空，则获取旧的更新队列

遍历旧的更新队列链表，依次获取每个更新对象的优先级， 如果优先级等于当前渲染的优先级，则传入baseSate执行更新对象中的更新函数获取新的baseState

如果更新对象的action是函数则传入旧的baseState得到新的baseState， 如果不是函数，那就是传入的数据，直接复制给baseState

返回最新的baseState

nextChildren = workInProgress.memoizedState(更新要用的JSX对象)

协调子节点 reconcileChildren(workInProgress, nextChildren)

如果wip对于的旧节点current存在，则需要协调旧节点的子节点来复用 workInProgress.child = reconcileChildFibers(    workInProgress,    current.child,    children   );

如果子节点是对象，则表示孩子节点只有一个，调用协调单节点的函数复用单节点， 然后根据是否复用给当前单节点打上Placement更新标记 placeSingleChild(       reconcileSingleElement(returnFiber, currentFirstChild, newChild)      )

reconcileSingleElement(returnFiber, currentFirstChild, newChild) 协调复用单个子节点并返回该复用节点或者新节点

// 前：abc 后：a  删除bc   // 前：a 后：b 删除b、创建a   // 前：无 后：a 创建a 从第一个旧的孩子节点开始遍历，与当前唯一的一个新节点比较 1.如果key相同type相同则可以复用，别忘了删除不可复用的兄弟节点 2.如果key相同type不同则不可复用 3.如果key不同则删除旧的，继续比较下一个旧节点和当前新的节点 4.如果没有找到可以复用的旧节点则根据element对象创建一个新的节点，并返回

将协调得到的单一子节点传入当前函数，如果该节点不是复用的节点，则打上Placement副作用标记

如果子节点是数组则调用协调多个子节点的函数 reconcileChildrenArray(returnFiber, currentFirstChild, newChild)

创建map用于存储旧节点，方便快速查找旧节点和新节点对比

循环遍历newChild数组，协调每一个节点

利用map存储旧节点，key->fiber。然后利用新节点的key来查找对比， 决定是复用旧节点还是根据element新建新节点。 // after对应的fiber，可能来自于复用，也可能是新建    const newFiber = updateFromMap(     returnFiber,     existingChildren,     i,     after    ) as FiberNode;

如果协调的子节点tag类型为number、string或者为空 作为优化手段，则复用其在数组中的下标即可，不复用key，

如果协调的子节点非字符串等类型，则复用key效率更高

从map中获取旧节点的key

如果协调的子节点为number、string或者为空 作为优化手段，如果从map中可以获取到旧文本节点则复用， 如果从map中获取不了旧文本节点则新建文本节点

如果协调的子节点tag类型为对象，若map中可以找到旧节点并且新机会节点的type一样 则复用旧节点，否则删除旧节点并根据element创建新节点

将新节点和上一个兄弟节点链接到一起

根据环境变量shouldTrackEffects，判断是首次挂载(false)还是更新(true)， 首次挂载则不需要在进行位置相关的diff操作

非首次挂载，则需要进行位置的diff操作 首先从map中获取到旧的节点的oldIndex 如果oldIndex < lastPlacedIndex 则需要向右移动，标记flags为Placement 如果oldindex>lastPlacedIndex 则可以复用

获取不了旧的index，则直接插入，标记flags为Placement

遍历结束后删除map中的引用，避免闭包

协调完整个数组后，返回第一个子节点

如果子节点是string或者number类型，则调用文本节点协调函数， 然后根据是否复用给当前节点打上Placement更新标记 reconcileSingleTextNode(returnFiber, currentFirstChild, newChild + '')

其它情况则全部视为删除旧节点

current不存在，则是首次挂载 mountChildFibers(workInProgress, null, children)

返回协调复用得到的子节点

HostComponent(DOM元素对应的fiber) updateHostComponent(workInProgress)

根据element传入到workInProgress中的pendingProps中的children， 继续向下协调复用子节点 reconcileChildren(workInProgress, nextChildren)

HostText(文本DOM元素对象的fiber） 直接返回return null

FunctionComponent(函数组件对应的fiber) updateFunctionComponent(workInProgress, renderLane)

执行函数组件，添加hooks到hooks队列，同时返回子节点 nextChildren = renderWithHooks(workInProgress, renderLane)

更新当前渲染的fiber currentlyRenderingFiber = workInProgress

重置wip上的缓存状态和更新队列，将当前渲染的lane更新为传入的lane workInProgress.memoizedState = null;  workInProgress.updateQueue = null;  renderLane = lane;

如果旧节点不为空，则要调用的hooks队列为更新时的hooks队列 currentDispatcher.current = HooksDispatcherOnUpdate

const HooksDispatcherOnMount: Dispatcher = {  useState: mountState,  useEffect: mountEffect }

如果旧节点为空，则要调用的hooks队列为挂载时的hooks队列 currentDispatcher.current = HooksDispatcherOnMount

const HooksDispatcherOnUpdate: Dispatcher = {  useState: updateState,  useEffect: updateEffect }

以当前lane优先级，执行函数组件，添加hooks到对应的队列中，返回子节点 const Component = workInProgress.type;  const props = workInProgress.pendingProps;  const children = Component(props);

执行函数组件，添加hooks到对应的队列中 以当前lane优先级，执行函数组件，添加hooks到对应的队列中，返回子节点 const children = Component(props);

执行函数组件上的useState(initialState) 实际就是执行HooksDispatchOnUpdate上的 mountState或者updateState

function mountState<State>(  initialState: (() => State) | State ): [State, Disptach<State>]

创建最新的hook对象，挂载到全局hooks链表上，返回这个新的hook对象 hook = mountWorkInProgressHook()

创建一个hook对象 const hook: Hook = {   memoizedState: null,   updateQueue: null,   next: null  }

如果是首次挂载，将新hook挂载到当前渲染的fiber上，并更新workInProgressHook指针 currentlyRenderingFiber.memoizedState = workInProgressHook = hook

如果是更新，则将新hook链接到workInProgressHook后面 然后移动workInProgressHook指针到最新的hooks上 workInProgressHook = workInProgressHook.next = hook;

返回最新的hook

如果传入的initialState是函数，则执行它获得新的memoizedState

如果传入的initialState是变量，则直接复制给memoizedState

将计算得到的新的memoizedState存入hook.memoizedState hook.memoizedState = memoizedState;

创建更新队列，用于初始化hook.updateQueue const queue = createUpdateQueue<State>();  hook.updateQueue = queue;

给SetState绑定调用参数，包括调用时的fiber，对应的更新队列 const dispatch = (queue.dispatch = dispatchSetState.bind(   null,   currentlyRenderingFiber,   queue  ))

返回最新的state值和setState函数

执行函数组件上的useEffect(create, deps) 执行函数组件上的useState(initialState) 实际就是执行HooksDispatchOnUpdate上的 mountEffect或者updateEffect

创建最新的hook对象，挂载到全局hooks链表上，返回这个新的hook对象 hook = mountWorkInProgressHook()

创建一个hook对象 const hook: Hook = {   memoizedState: null,   updateQueue: null,   next: null  }

如果是首次挂载，将新hook挂载到当前渲染的fiber上，并更新workInProgressHook指针 currentlyRenderingFiber.memoizedState = workInProgressHook = hook

如果是更新，则将新hook链接到workInProgressHook后面 然后移动workInProgressHook指针到最新的hooks上 workInProgressHook = workInProgressHook.next = hook;

返回最新的hook

给当前渲染的节点打上PassiveEffect标记 // 注意区分PassiveEffect与Passive，PassiveEffect是针对fiber.flags  // Passive是effect类型，代表useEffect。类似的，Layout代表useLayoutEffect  (currentlyRenderingFiber as FiberNode).flags |= PassiveEffect;

给新创建的hook对象上保持的effect链表添加新的effect对象 hook.memoizedState = pushEffect(   Passive | HookHasEffect,   create,   undefined,   nextDeps  )

根据传入的信息创建一个新的effect对象

判断当前渲染节点上是否存在旧的effect链表updateQue ，如果存在则断开旧链表，接上新节点，然后合并成新的环状链表

如果当前渲染节点上不存在旧的effect链表updataQue， 则创建新的updateQue，接上新的链表节点，节点自己成环

返回更新后的effect链表

退出前重置一些全局变量 currentlyRenderingFiber = null;  workInProgressHook = null;  currentHook = null;  renderLane = NoLane;

返回得到的子节点

协调子节点 reconcileChildren(workInProgress, nextChildren)

reconcileSingleElement(returnFiber, currentFirstChild, newChild) 协调复用单个子节点并返回该复用节点或者新节点

将协调得到的单一子节点传入当前函数，如果该节点不是复用的节点，则打上Placement副作用标记

如果子节点是数组则调用协调多个子节点的函数 reconcileChildrenArray(returnFiber, currentFirstChild, newChild)

其它情况则全部视为删除旧节点

current不存在，则是首次挂载 workInProgress.child = mountChildFibers(workInProgress, null, children) mountChildFibers()函数和reconcileChildFibers()引用的是同一个函数，只是传入的闭包shouldTrackEffects 变量不一样，通过该变量可以区分是首次挂载还是更新

还是调用一样的函数，只是表示环境变量的闭包值不一样 reconcileChildFibers(    workInProgress,    current.child,    children   );

返回协调复用后的子节点 return workInProgress.child

执行完beginWork后，pendingProps 变为 memoizedProps fiber.memoizedProps = fiber.pendingProps

如果next不为空，则将wip指针更新为最新的next， 循环执行workLoop，继续向下协调 workInProgress = next

如果next为空，则表示递归到底层，开始向上来协调兄弟节点 completeUnitOfWork(fiber)

循环执行completeWork，顺序如下 从叶子节点开始向上返回，首先遍历兄弟节点， 遍历完兄弟节点后返回父节点， 循环上述过程，直到返回rootFiber根节点

completeWork(node) 根据fiber的tag switch调用相应的处理函数

HostComponent(DOM元素对应的fiber)

如果旧节点current存在并且对应的DOM节点也存在 则复用DOM，调用更新props的函数 updateFiberProps(workInProgress.stateNode, newProps)

根据新props中的属性和回调函数更新旧DOM

如果上述条件不成立，则新建一个DOM对象

将子节点挂载到DOM上 appendAllChildren(instance, workInProgress)

将新建的DOM子节点挂载到父节点上, 要注意的是只有DOM原生节点可以挂载， 非原生节点（组件fiber）则找其子树上的原生节点挂载

冒泡flag bubbleProperties(workInProgress)

从第一个子节点开始循环遍历子节点链表 1.将子节点的flags、subtreeFlags合并到父节点的subtreeFlags上 2.将新建的子节点链表中后续的兄弟节点全部链接到父节点上（建子节点链表时只链接的sibling，没链接return）

HostRoot(rootFiber)

冒泡flag bubbleProperties(workInProgress)

HostText(文本DOM元素对象的fiber）

如果旧节点current存在并且对应的DOM文本节点也存在 则复用DOM文本节点，如果新旧文本相同则直接复用， 如果新旧文本不同则调用markUpdate(workInProgress)

如果上述条件不满足，则新建一个DOM文本节点 textInstance = createTextInstance(newProps.content);     workInProgress.stateNode = textInstance;

冒泡flag bubbleProperties(workInProgress)

FunctionComponent(函数组件对应的fiber)

冒泡flag bubbleProperties(workInProgress)

所有case都return null

获取上一次的执行上下文 executionContext = prevExecutionContext 初始化全局渲染优先级 workInProgressRootRenderLane = NoLane const finishedWork = root.current.alternate  root.finishedWork = finishedWork  root.finishedLane = lane

// commit阶段操作  commitRoot(root)

markRootFinished(root, lane)

将当前节点的flag以及subtreeFlags与PassiveMask按位与，得出该子树是否有副作用 如果有副作用并且rootDoesHavePassiveEffects标记为false，则修改为true， 然后以普通优先级调度异步任务 rootDoesHavePassiveEffects = true;    scheduleCallback(NormalSchedulerPriority, () => {     flushPassiveEffects(pendingPassiveEffects);     return;    })

以当前优先级调度新的任务 unstable_scheduleCallback(priorityLevel, callback, options)

获取当前时间currentTime 根据优先级priorityLevel switch选择优先级对应的延迟时间 计算任务过期时间expirationTime = startTime + timeout 新建一个任务对象var newTask = {     id: taskIdCounter++,     callback: callback,     priorityLevel: priorityLevel,     startTime: startTime,     expirationTime: expirationTime,     sortIndex: -1   }

如果当前任务为延迟任务，则加入延迟队列timerQueue 如果当前有任务执行需要调用取消函数cancelHostTimeout(); 调度当前延迟任务requestHostTimeout(handleTimeout, startTime - currentTime)

如果当前任务为过期任务，则加入任务队列taskQueue， 如果当前没有任务在执行则调度该过期任务requestHostCallback(flushWork)

返回当前任务对象 return newTask

将当前节点的flags、subtreeFlags和副作用掩码按位与 得出该子树是否存在某个节点有副作用

如果子树中有节点有副作用 更改执行环境为CommitContext executionContext |= CommitContext

beforeMutation阶段： 遍历执行相关的hooks链表

Mutation阶段： 遍历执行相关hooks链表 commitMutationEffects(finishedWork, root)

从父节点开始向下深度遍历， 通过subtreeFlags找到有副作用的子节点，然后更新子节点 commitMutationEffectsOnFiber(nextEffect, root) 遍历子节点的兄弟节点，直到最后一个兄弟几点，此时返回到父节点

commitMutationEffectsOnFiber(nextEffect, root)

获取nextEffect的flags 根据flags执行对应的操作

Placement执行插入或者移动 commitPlacement(finishedWork)

找到待插入节点的DOM容器节点 hostParent = getHostParent(finishedWork)

向上查找找到tag为 HostComponent（DOM元素的tag）或 HostRoot（rootFiber的tag）

找到带插入节点的DOM兄弟节点 sibling = gethostSibling(finishedWork)

难点在于目标fiber的hostSibling可能并不是他的同级sibling  * 比如： <A/> 其中：function B() {return <div/>} 所以A的hostSibling实际是B的child  * 实际情况层级可能更深  * 同时：一个fiber被标记Placement，那他就是不稳定的（他对应的DOM在本次commit阶段会移动），也不能作为hostSibling

找到了待插入节点的父节点和兄弟节点就可以插入了 insertOrAppendPlacementNodeIntoContainer(finishedWork, hostParent, sibling)

如果是DOM类型的节点直接insert或者append insertChildToContainer(fiber.stateNode, parent, before)  appendChildToContainer(fiber.stateNode, parent)

如果节点是组件即节点则递归调用该函数，插入节点改为其子节点 如果有洗兄弟节点则处理兄弟节点 insertOrAppendPlacementNodeIntoContainer(child, parent, before);   let sibling = child.sibling;   while (sibling !== null) {    insertOrAppendPlacementNodeIntoContainer(sibling, parent, before);

ChildDeletion执行删除操作 commitDeletion(childToDelete, root)

Update执行更新操作 commitUpdate(finishedWork)

PassiveEffect则收集因为deps变化而需要执行的Effect commitPassiveEffect(finishedWork, root, type)

root.pendingPassiveEffects[type].push(updateQueue.lastEffect as Effect)

Mutation执行完，切换Fiber Tree root.current = finishedWork;

Layout阶段

commit执行完，更改执行环境为之前的环境 executionContext = prevExecutionContext

还原全局副作用标记 rootDoesHavePassiveEffects = false;

点击事件触发更新

setState(newState)

function dispatchSetState<State>(  fiber: FiberNode,  updateQueue: UpdateQueue<State>,  action: Action<State> )

获取更新时的优先级 lane = requestUpdateLane()