React源码解析之scheduleWork（上）
- 2019 年 10 月 4 日
- 筆記
前言： 你需要知道：浅谈React 16中的Fiber机制(https://tech.youzan.com/react-fiber/)、React源码解析之RootFiber、React源码解析之FiberRoot
在之前的文章中讲到，React更新的方式有三种： （1）ReactDOM.render() || hydrate（ReactDOMServer渲染） （2）setState() （3）forceUpdate()
在createUpdate后就进入scheduleWork流程，接下来我们就正式进入调度流程
一、scheduleUpdateOnFiber() 作用： 调度update任务
提示： scheduleWork即scheduleUpdateOnFiber：
export const scheduleWork = scheduleUpdateOnFiber;
源码：
//scheduleWork export function scheduleUpdateOnFiber( fiber: Fiber, expirationTime: ExpirationTime, ) { //判断是否是无限循环update checkForNestedUpdates(); //测试环境用的，不看 warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber); //找到rootFiber并遍历更新子节点的expirationTime const root = markUpdateTimeFromFiberToRoot(fiber, expirationTime); if (root === null) { warnAboutUpdateOnUnmountedFiberInDEV(fiber); return; } //NoWork表示无更新操作 root.pingTime = NoWork; //判断是否有高优先级任务打断当前正在执行的任务 checkForInterruption(fiber, expirationTime); //报告调度更新，测试环境用的，可不看 recordScheduleUpdate(); // TODO: computeExpirationForFiber also reads the priority. Pass the // priority as an argument to that function and this one. const priorityLevel = getCurrentPriorityLevel(); //1073741823 //如果expirationTime等于最大整型值的话 //如果是同步任务的过期时间的话 if (expirationTime === Sync) { //如果还未渲染，update是未分批次的， //也就是第一次渲染前 if ( // Check if we're inside unbatchedUpdates (executionContext & LegacyUnbatchedContext) !== NoContext && // Check if we're not already rendering (executionContext & (RenderContext | CommitContext)) === NoContext ) { // Register pending interactions on the root to avoid losing traced interaction data. //跟踪这些update，并计数、检测它们是否会报错 schedulePendingInteractions(root, expirationTime); // This is a legacy edge case. The initial mount of a ReactDOM.render-ed // root inside of batchedUpdates should be synchronous, but layout updates // should be deferred until the end of the batch. //批量更新时，render是要保持同步的，但布局的更新要延迟到批量更新的末尾才执行 //初始化root //调用workLoop进行循环单元更新 let callback = renderRoot(root, Sync, true); while (callback !== null) { callback = callback(true); } } //render后 else { //立即执行调度任务 scheduleCallbackForRoot(root, ImmediatePriority, Sync); //当前没有update时 if (executionContext === NoContext) { // Flush the synchronous work now, wnless we're already working or inside // a batch. This is intentionally inside scheduleUpdateOnFiber instead of // scheduleCallbackForFiber to preserve the ability to schedule a callback // without immediately flushing it. We only do this for user-initated // updates, to preserve historical behavior of sync mode. //刷新同步任务队列 flushSyncCallbackQueue(); } } } //如果是异步任务的话，则立即执行调度任务 else { scheduleCallbackForRoot(root, priorityLevel, expirationTime); } if ( (executionContext & DiscreteEventContext) !== NoContext && // Only updates at user-blocking priority or greater are considered // discrete, even inside a discrete event. // 只有在用户阻止优先级或更高优先级的更新才被视为离散，即使在离散事件中也是如此 (priorityLevel === UserBlockingPriority || priorityLevel === ImmediatePriority) ) { // This is the result of a discrete event. Track the lowest priority // discrete update per root so we can flush them early, if needed. //这是离散事件的结果。 跟踪每个根的最低优先级离散更新，以便我们可以在需要时尽早清除它们。 //如果rootsWithPendingDiscreteUpdates为null，则初始化它 if (rootsWithPendingDiscreteUpdates === null) { //key是root，value是expirationTime rootsWithPendingDiscreteUpdates = new Map([[root, expirationTime]]); } else { //获取最新的DiscreteTime const lastDiscreteTime = rootsWithPendingDiscreteUpdates.get(root); //更新DiscreteTime if (lastDiscreteTime === undefined || lastDiscreteTime > expirationTime) { rootsWithPendingDiscreteUpdates.set(root, expirationTime); } } } }
解析： 有点长，我们慢慢看↓
二、checkForNestedUpdates() 作用： 判断是否是无限循环的update
源码：
// Use these to prevent an infinite loop of nested updates const NESTED_UPDATE_LIMIT = 50; let nestedUpdateCount: number = 0; //防止无限循环地嵌套更新 function checkForNestedUpdates() { if (nestedUpdateCount > NESTED_UPDATE_LIMIT) { nestedUpdateCount = 0; rootWithNestedUpdates = null; invariant( false, 'Maximum update depth exceeded. This can happen when a component ' + 'repeatedly calls setState inside componentWillUpdate or ' + 'componentDidUpdate. React limits the number of nested updates to ' + 'prevent infinite loops.', ); } }
解析： 超过 50层嵌套update，就终止进行调度，并报出error
常见的造成死循环的为两种情况： ① 在render()中无条件调用setState() 注意： 有条件调用setState()的话，是可以放在render()中的
render(){ if(xxx){ this.setState({ yyy }) } }
② 如下图，在shouldComponentUpdate()和componentWillUpdate()中调用setState()
setState死循环
三、markUpdateTimeFromFiberToRoot() 作用： 找到rootFiber并遍历更新子节点的expirationTime
源码：
//目标fiber会向上寻找rootFiber对象，在寻找的过程中会进行一些操作 function markUpdateTimeFromFiberToRoot(fiber, expirationTime) { // Update the source fiber's expiration time //如果fiber对象的过期时间小于 expirationTime，则更新fiber对象的过期时间 //也就是说，当前fiber的优先级是小于expirationTime的优先级的，现在要调高fiber的优先级 if (fiber.expirationTime < expirationTime) { fiber.expirationTime = expirationTime; } //在enqueueUpdate()中有讲到，与fiber.current是映射关系 let alternate = fiber.alternate; //同上 if (alternate !== null && alternate.expirationTime < expirationTime) { alternate.expirationTime = expirationTime; } // Walk the parent path to the root and update the child expiration time. //向上遍历父节点，直到root节点，在遍历的过程中更新子节点的expirationTime //fiber的父节点 let node = fiber.return; let root = null; //node=null,表示是没有父节点了，也就是到达了RootFiber，即最大父节点 //HostRoot即树的顶端节点root if (node === null && fiber.tag === HostRoot) { //RootFiber的stateNode就是FiberRoot root = fiber.stateNode; } //没有到达FiberRoot的话，则进行循环 else { while (node !== null) { alternate = node.alternate; //如果父节点的所有子节点中优先级最高的更新时间仍小于expirationTime的话 //则提高优先级 if (node.childExpirationTime < expirationTime) { //重新赋值 node.childExpirationTime = expirationTime; //alternate是相对于fiber的另一个对象，也要进行更新 if ( alternate !== null && alternate.childExpirationTime < expirationTime ) { alternate.childExpirationTime = expirationTime; } } //别看差了是对应(node.childExpirationTime < expirationTime)的if else if ( alternate !== null && alternate.childExpirationTime < expirationTime ) { alternate.childExpirationTime = expirationTime; } //如果找到顶端rootFiber，结束循环 if (node.return === null && node.tag === HostRoot) { root = node.stateNode; break; } node = node.return; } } //更新该rootFiber的最旧、最新的挂起时间 if (root !== null) { // Update the first and last pending expiration times in this root const firstPendingTime = root.firstPendingTime; if (expirationTime > firstPendingTime) { root.firstPendingTime = expirationTime; } const lastPendingTime = root.lastPendingTime; if (lastPendingTime === NoWork || expirationTime < lastPendingTime) { root.lastPendingTime = expirationTime; } } return root; }
解析： markUpdateTimeFromFiberToRoot()主要做了以下事情 （1）更新fiber对象的expirationTime （2）根据fiber.return向上遍历寻找RootFiber（fiber的顶层对象） （3）在向上遍历的过程中，更新父对象fiber.return子节点的childExpirationTime
关于RootFiber，请参考：React源码解析之RootFiber
（4）找到RootFiber后，根据RootFiber.stateNode=FiberRoot的关系，找到FiberRoot
（5）更新该rootFiber的最旧、最新的挂起时间 （6）返回RootFiber
四、checkForInterruption() 作用： 判断是否有高优先级任务打断当前正在执行的任务
源码：
//判断是否有高优先级任务打断当前正在执行的任务 function checkForInterruption( fiberThatReceivedUpdate: Fiber, updateExpirationTime: ExpirationTime, ) { //如果任务正在执行，并且异步任务已经执行到一半了， //但是现在需要把执行权交给浏览器，去执行优先级更高的任务 if ( enableUserTimingAPI && workInProgressRoot !== null && updateExpirationTime > renderExpirationTime ) { //打断当前任务，优先执行新的update interruptedBy = fiberThatReceivedUpdate; } }
解析： 如果当前fiber的优先级更高，需要打断当前执行的任务，立即执行该fiber上的update，则更新interruptedBy
五、getCurrentPriorityLevel() 作用： 获取当前调度任务的优先级
源码：
// Except for NoPriority, these correspond to Scheduler priorities. We use // ascending numbers so we can compare them like numbers. They start at 90 to // avoid clashing with Scheduler's priorities. //除了90，用数字是因为这样做，方便比较 //从90开始的原因是防止和Scheduler的优先级冲突 export const ImmediatePriority: ReactPriorityLevel = 99; export const UserBlockingPriority: ReactPriorityLevel = 98; export const NormalPriority: ReactPriorityLevel = 97; export const LowPriority: ReactPriorityLevel = 96; export const IdlePriority: ReactPriorityLevel = 95; // NoPriority is the absence of priority. Also React-only. export const NoPriority: ReactPriorityLevel = 90; //获取当前调度任务的优先级 export function getCurrentPriorityLevel(): ReactPriorityLevel { switch (Scheduler_getCurrentPriorityLevel()) { //99 case Scheduler_ImmediatePriority: return ImmediatePriority; //98 case Scheduler_UserBlockingPriority: return UserBlockingPriority; //97 case Scheduler_NormalPriority: return NormalPriority; //96 case Scheduler_LowPriority: return LowPriority; //95 case Scheduler_IdlePriority: return IdlePriority; default: invariant(false, 'Unknown priority level.'); } }
Scheduler_getCurrentPriorityLevel()：
const { unstable_getCurrentPriorityLevel: Scheduler_getCurrentPriorityLevel, } = Scheduler; function unstable_getCurrentPriorityLevel() { return currentPriorityLevel; } //当前调度优先级默认为 NormalPriority var currentPriorityLevel = NormalPriority;
解析： 记住scheduler优先级是90往上，并且默认是NormalPriority（97）
如果是同步任务，并且是初次render()的话，会先执行schedulePendingInteractions()
六、schedulePendingInteractions() 作用： 跟踪需要同步执行的update们，并计数、检测它们是否会报错
源码： schedulePendingInteractions()：
//跟踪这些update，并计数、检测它们是否会报错 function schedulePendingInteractions(root, expirationTime) { // This is called when work is scheduled on a root. // It associates the current interactions with the newly-scheduled expiration. // They will be restored when that expiration is later committed. //当调度开始时就执行，每调度一个update，就更新跟踪栈 if (!enableSchedulerTracing) { return; } //调度的"交互" scheduleInteractions(root, expirationTime, __interactionsRef.current); }
__interactionsRef：
// Set of currently traced interactions. // Interactions "stack"– // Meaning that newly traced interactions are appended to the previously active set. // When an interaction goes out of scope, the previous set (if any) is restored. //设置当前跟踪的interactions，也是interactions的栈 //它是一个集合 let interactionsRef: InteractionsRef = (null: any);
scheduleInteractions()：
//与schedule的交互 function scheduleInteractions(root, expirationTime, interactions) { if (!enableSchedulerTracing) { return; } //当interactions存在时 if (interactions.size > 0) { //获取FiberRoot的pendingInteractionMap属性 const pendingInteractionMap = root.pendingInteractionMap; //获取pendingInteractions的expirationTime const pendingInteractions = pendingInteractionMap.get(expirationTime); //如果pendingInteractions不为空的话 if (pendingInteractions != null) { //遍历并更新还未调度的同步任务的数量 interactions.forEach(interaction => { if (!pendingInteractions.has(interaction)) { // Update the pending async work count for previously unscheduled interaction. interaction.__count++; } pendingInteractions.add(interaction); }); } //否则初始化pendingInteractionMap //并统计当前调度中同步任务的数量 else { pendingInteractionMap.set(expirationTime, new Set(interactions)); // Update the pending async work count for the current interactions. interactions.forEach(interaction => { interaction.__count++; }); } //计算并得出线程的id const subscriber = __subscriberRef.current; if (subscriber !== null) { //这个暂时不看了 const threadID = computeThreadID(root, expirationTime); //检测这些任务是否会报错 subscriber.onWorkScheduled(interactions, threadID); } } }
subscriber.onWorkScheduled()：
//利用线程去检测同步的update，判断它们是否会报错 function onWorkScheduled( interactions: Set<Interaction>, threadID: number, ): void { let didCatchError = false; let caughtError = null; //遍历去检测 subscribers.forEach(subscriber => { try { subscriber.onWorkScheduled(interactions, threadID); } catch (error) { if (!didCatchError) { didCatchError = true; caughtError = error; } } }); if (didCatchError) { throw caughtError; } }
解析： 利用FiberRoot的pendingInteractionMap属性和不同的expirationTime，获取每次schedule所需的update任务的集合，记录它们的数量，并检测这些任务是否会出错。
七、renderRoot() 作用： 初始化root，并调用workLoop进行循环单元更新
这个我们放在后面再讲。
后言： 本来是写到十一了，但发现还有一层套一层的function，全部放在一篇文章里的话，太长了，容易消化不了，所以我们先在这里打住：
export function scheduleUpdateOnFiber(){ xxx xxx xxx if (expirationTime === Sync) { if( 第一次render ){ //跟踪这些update，并计数、检测它们是否会报错 schedulePendingInteractions(root, expirationTime); //初始化root，调用workLoop进行循环单元更新 let callback = renderRoot(root, Sync, true); }else{ 下篇要讲的内容。。。。 } } }
scheduleWork 结束后，我会像往常一样，制作一张流程图帮助大家梳理思路！
源码请参考GitHub： https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react-reconciler/src/ReactFiberWorkLoop.js
