做图表好看的网站,网站建设服务公司有哪些,网站开发机构,哪个网站跨境电商做的最好reconciler执行流程 1 #xff09;概述
此处先归纳一下react-reconciler包的主要作用#xff0c;将主要功能分为4个方面#xff1a; 输入#xff1a;暴露api函数#xff08;如#xff1a;scheduleUpdateOnFiber#xff09;, 供给其他包#xff08;如react包#xff0…reconciler执行流程 1 概述
此处先归纳一下react-reconciler包的主要作用将主要功能分为4个方面 输入暴露api函数如scheduleUpdateOnFiber, 供给其他包如react包调用注册调度任务与调度中心(scheduler包)交互注册调度任务task等待任务回调执行任务回调在内存中构造出fiber树同时与渲染器(react-dom)交互在内存中创建出与fiber对应的DOM节点输出与渲染器(react-dom)交互渲染DOM节点 图中的1,2,3,4步骤可以反映react-reconciler包从输入到输出的运作流程这是一个固定流程每一次更新都会运行
2 输入 在ReactFiberWorkLoop.js中承接输入的函数只有scheduleUpdateOnFiber 在 react-reconciler 对外暴露的api函数中只要涉及到需要改变fiber的操作无论是首次渲染或后续更新操作 最后都会间接调用 scheduleUpdateOnFiber 所以scheduleUpdateOnFiber函数是输入链路中的必经之路 //唯一接收输入信号的函数
export function scheduleUpdateOnFiber(fiber: Fiber,lane: Lane,eventTime: number,
) {// ... 省略部分无关代码const root markUpdateLaneFromFiberToRoot(fiber, lane);// 同步if (lane SyncLane) {if ((executionContext LegacyUnbatchedContext) ! NoContext (executionContext (RenderContext | CommitContext)) NoContext) {// 直接进行fiber构造performSyncWorkOnRoot(root);} else {// 注册调度任务经过Scheduler包的调度间接进行fiber构造ensureRootIsScheduled(root, eventTime);}} else {// 注册调度任务经过Scheduler包的调度间接进行fiber构造ensureRootIsScheduled(root, eventTime);}
}逻辑进入到scheduleUpdateOnFiber之后后面有2种可能 1.不经过调度直接进行fiber构造.2.注册调度任务经过Scheduler包的调度间接进行fiber构造.
2 注册调度任务
与输入环节紧密相连scheduleUpdateOnFiber函数之后立即进入 ensureRootIsScheduled 函数
// ... 省略部分无关代码
function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {//前半部分判断是否需要注册新的调度const existingCallbackNode - root. callbackNode;const nextlanes getNextLanes(root,root workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,);const newCallbackPriority returnNextLanesPriority();if (nextLanes NoLanes) {return;}if (existingCallbackNode ! null) {const existingCallbackPriority root.callbackPriority;if (existingCallbackPriority newCallbackPriority) {return;}cancelCallback(existingCallbackNode);}// 后半部分注册调度任务let newCallbackNode;if (newCallbackPriority SyncLanePriority){newCallbackNode scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root),);} else if (newCallbackPriority SyncBatchedLanePriority) {newCallbackNode scheduleCallback(ImmediateSchedulerPriority,performSyncWorkOnRoot.bind(null, root),);} else {const schedulerPriorityLevel lanePriorityToSchedulerPriority(newCallbackPriority,);newCallbackNode scheduleCallback(schedulerPriorityLevel,performConcurrentWorkOnRoot.bind(null, root),);}root.callbackPriority newCallbackPriority;root.callbackNode newCallbackNode;
}ensureRootIsScheduled的逻辑很清晰分为2部分 1.前半部分判断是否需要注册新的调度如果无需新的调度会退出函数2.后半部分注册调度任务 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot 被封装到了任务回调 (schedulecallback)等待调度中心执行任务任务运行其实就是执行 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot
3 执行任务回调 任务回调实陈上就是执行 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot 简单看一下它们的源码将主要逻辑剥离出来单个函数的代码量并不多 //..省略部分无关代码
function performSyncWorkOnRoot(root) {let lanes;let exitStatus;lanes getNextLanes(root, NoLanes);// 1. fiber树构造exitStatus renderRootSync(root, lanes);// 2. 异常处理有可能fiber构造过程中出现异常if (root.tag ! LegacyRoot exitStatus RootErrored) {// ...}// 3. 输出渲染fiber树const finishedWork: Fiber (root.current.alternate: any);root.finishedwork finishedWork;root.finishedLanes lanes;commitRoot(root);// 退出前再次检测是否还有其他更新是否需要发起新调度ensureRootIsScheduled(root, now());return null;
}performSyncWorkOnRoot 的逻辑很清晰分为3部分 fiber 树构造 异常处理: 有可能fiber构造过程中出现异常 调用输出 // ... 省略部分无关代码
function performConcurrentWorkOnRoot(root) {const originalCallbackNode root.callbackNode;// 1、刷新pending状态的effects有可能某些effect会取消本次任务const didFlushPassiveEffects flushPassiveEffects();if (didFlushPassiveEffects) {if (root.callbackNode ! originalCallbackNode) {// 任务被取消退出调用return null;} else {// Current task was not canceled. Continue.}}// 2.获取本次渲染的优先级let lanes getNextLanes(root,root workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,);// 3.构造fiber树let exitStatus renderRootConcurrent(root, lanes);if (includesSomeLane(workInProgressRootIncludedLanes,workInProgressRootUpdatedLanes,)) {// 如果在render过程中产生了新的update且新update的优先级与最初render的优先级有交集// 那么最初render无效丢弃最初render的结果等待下一次调度prepareFreshStack(root, NoLanes);} else if (exitStatus ! RootIncomplete) {// 4、异常处理有可能fiber构造过程中出现异常if (exitStatus RootErrored) {// ...}const finishedWork: Fiber (root.current. alternate: any);root.finishedWork finishedwork;root.finishedLanes lanes;// 5.输出渲染fiber树finishConcurrentRender(root, exitStatus, lanes);}// 退出前再次检测是否还有其他更新是否需要发起新调度ensureRootIsScheduled(root, now());if (root.callbackNode originalCallbackNode) {// 渲染被阻断返回一个新的performConcurrentWorkOnRoot函数。等待下一次调用return performConcurrentWorkOnRoot.bind(null, root);}return null;
}performConcurrentWorkOnRoot 的逻辑与 performSyncWorkOnRoot 的不同之处在于 对于可中断渲染的支持 1.调用 performConcurrentWorkOnRoot 函数时首先检查是否处于 render 过程中是否需要恢复上一次渲染2.如果本次渲染被中断最后返回一个新的 performConcurrentWorkOnRoot 函数等待下一次调用
4 输出
// ... 省略部分无关代码
function commitRootImpl(root, renderPriorityLevel) {// 设置局部变量const finishedWork root.finishedWork;const lanes - root. finishedLanes;// 清空FiberRoot对象上的属性root.finishedWork null;root.finishedLanes NoLanes;root.callbackNode null;// 提交阶段let firstEffect finishedWork.firstEffect;if (firstEffect ! null) {const prevExecutionContext - executionContext;executionContext | CommitContext;// 阶段1dom突变之前nextEffect firstEffect;do {commitBeforeMutationEffects();} while (nextEffect ! null);// 阶段2dom突变界面发生改变nextEffect firstEffect;do {commitMutationEffects(root, renderPriorityLevel);} while (nextEffect ! null);root.current finishedWork;// 阶段3layout阶段调用生命周期componentDidUpdate和回调函数等nextEffect firstEffect;do{commitLayoutEffects(root, lanes);} while (nextEffect ! null);nextEffect null;executionContext prevExecutionContext;}ensureRootIsScheduled(root, now());return null;
}在输出阶段commitRoot 的实现逻辑是在 commitRootImpl 函数中其主要逻辑是处理副作用队列将最新的fiber树结构反映到DOM上核心逻辑分为3个步骤 1.commitBeforeMutationEffects dom变更之前主要处理副作用队列中带有Snapshot, Passive标记的fiber节点 2.commitMutationEffects dom变更界面得到更新.主要处理副作用队列中带有Placement,Update,Deletion, Hydrating标记的fiber节点 3.commitLayoutEffects dom变更后主要处理副作用队列中带有 update | Callback 标记的fiber节点. 这块流程参考 React16版本的流程看下不同之处 参考 https://blog.csdn.net/Tyro_java/article/details/135845906 所以整个 reconciler 的执行过程中核心做了2个事情 1 Render (基于task, 可以被打断, 可以被打断的前提是基于渲染 mode) 初始化 fiber更新 fiber 2 commit dom 变更之前dom 变更dom 更新之后
