React 16.7 Fiber源码解读 (二)之运行流程
前言
之前我们了解了Fiber的数据结构 React 16.7 Fiber源码解读 (一)之数据结构
接下来主要探讨fiber运行的流程。
目录如下:
- Fiber vs Stack
- 关键字Work
- 运行流程图
-
重要函数源码解读
- enqueueSetState
- requestWork
- scheduleCallbackWithExpirationTime
- workLoop
- performUnitOfWork
- beginWork
- performUnitOfWork动态图
- commitLifeCycles
- Fiber Debugger
fiber vs stack
上一篇我们介绍了fiber的数据结构,自然产生出几个问题:
- 为什么React 16之前的stack reconciliation无法被中断?
- 为什么fiber的数据结构可以使进行中的work可以被中断?
我打算从stack和fiber数据结构的角度来回答这个问题:
stack无法被中断是因为中断后无法恢复现场,fiber可以被中断是因为中断后可以恢复现场。 听起来像句废话,容我接着分析:
首先来看stack:
// stack node数据结构
export type Node = {
...
children: [...]
...
}
其实是一个树结构,每个node维护一个children保持对子节点的引用。
通过walk来构建虚拟dom:
// stack reconciliation通过递归调用walk生成visual dom
walk(root);
function walk(instance) {
doWork(instance);
const children = instance.render();
children.forEach(walk);
}
function doWork(o) {
console.log(o);
}
我们都知道,递归调用的过程是一层层的入栈,每一层我们称为stack frame,当一个stack frame完成后出栈回到上一级。假设某个子节点还在运行时,由于出现了优先级更高的任务,导致整个walk运行现场被打断了(之前的多层入栈都被清除了),尽管我们也许还保有被中断节点的引用,当高优先级任务运行完成,只凭这个中断节点的引用是无法恢复递归的现场的,我们既无法找到它的兄弟节点,也无法找到它的父亲节点。
再来看fiber:
- 数据结构给力
- 构建visual dom不再使用递归
export type Fiber = {
// ...
// 当前fiber的父级fiber实例
return: Fiber | null,
// 子Fiber
child: Fiber | null,
// 兄弟fiber
sibling: Fiber | null
// ...
}
关键字Work
React在协调阶段(reconciliation)的各项工作诸如运行周期函数,更新ref,都可以认为是一个Work.
对于不同类型的React Element所做的work也不尽相同。在React中我所知道的element类型就有class component,function component, host component,portals等。
通过每个fiber,可以看出其所对应的react element有哪些work要做,即一个fiber对应unit of work。fiber的数据结构可以使其对应的work可以被追踪(track),暂停(pause)或者放弃(abort)
运行流程图
先上一张运行流程图:
重要函数源码解读
接下来会了解运行过程中涉及到的一些重要函数。
enqueueSetState
我们在业务代码中通常用setState来改变组件状态,在调用栈中,我们经常会看到enqueueSetState,代表React接管了之后的工作,即将进入协调(render/reconciliation)阶段。
在React 16.7中,enqueueSetState做了以下几件重要的事情:
- 建立组件对应的fiber
- 将组件的update放入fiber的updateQueue中
- 通过scheduleWork正式开始任务调度
const classComponentUpdater = {
isMounted,
enqueueSetState(inst, payload, callback) {
const fiber = getInstance(inst);
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
const update = createUpdate(expirationTime);
update.payload = payload;
if (callback !== undefined && callback !== null) {
// ...(DEV WARNING)
update.callback = callback;
}
flushPassiveEffects();
// 将组件的新状态更新到该组件对应的fiber.updateQueue中
// 16.3中为 insertUpdateIntoFiber(fiber, update)
enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
}
...
}
work的调度工作主要在ReactFiberScheduler.js中完成。流程图我们可以找到一条由重要函数组成的调度链:scheduleWork -> requestWork -> performSyncWork / performAsyncWork -> workLoop -> performUnitOfWork -> render
requestWork
function requestWork(root, expirationTime) {
...
if (expirationTime === Sync) {
performSyncWork();
} else {
scheduleCallbackWithExpirationTime(root, expirationTime);
}
...
}
scheduleCallbackWithExpirationTime
function scheduleCallbackWithExpirationTime(root, expirationTime) {
// ...
callbackExpirationTime = expirationTime;
const currentMs = now() - originalStartTimeMs;
const expirationTimeMs = expirationTimeToMs(expirationTime);
const timeout = expirationTimeMs - currentMs;
// 将异步(低优先级)任务放入requestIdleCallback或其polyfill
callbackID = scheduleDeferredCallback(performAsyncWork, {timeout});
}
workLoop
非常简短但是很关键。
循环而不是以递归的方式遍历fiber tree.
isYieldy 为 true, work为异步否则为同步
function workLoop(isYieldy) {
if (!isYieldy) {
// Flush work without yielding
while (nextUnitOfWork !== null) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}
} else {
// Flush asynchronous work until there's a higher priority event
// shouldYieldToRenderer()为true代表没有剩余时间执行异步低优先级任务即nextUnitOfWork
while (nextUnitOfWork !== null && !shouldYieldToRenderer()) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}
}
}
performUnitOfWork 和 beginWork
performUnitOfWork 调用的核心函数是beginWork,beginWork会遍历当前workInProgress的所有子级fiber,完成单元任务的处理,之后继续处理下一个任务。
// 执行一个workInprogress并且返回下一个可执行的workInProgress(next),直到next不存在,结束本次workloop
function performUnitOfWork(workInProgress) {
var current = workInProgress.alternate;
// ...
// See if beginning this work spawns more work.
// 遍历所有子级fiber,完成单元任务的处理,之后继续处理下一个任务
var next = beginWork(current, workInProgress, nextPriorityLevel);
// ...
if (!next) {
// If this doesn't spawn new work, complete the current work.
next = completeUnitOfWork(workInProgress);
}
ReactCurrentOwner.current = null;
// ...
return next;
}
function beginWork(current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime): Fiber | null {
...
switch (workInProgress.tag) {
case IndeterminateComponent: ...
case LazyComponent:...
case FunctionComponent: {
...
return updateFunctionComponent(current, workInProgress, Component, resolvedProps, renderExpirationTime);
}
...
}
}
function updateFunctionComponent(workInProgress, ...) {
...
return workInProgress.child
}
performUnitOfWork动态图
下图fiber结构中a1为root,b1, b2, b3是a1的child。
一个节点(unit work)所有的child完成后该节点即为完成(completeUnitOfWork)
commitLifeCycles
commit阶段的重要函数,在这里会根据不同的情况调用业务代码中的周期函数
// 根据current是否存在判断调用componentDidMount 还是 componentDidUpdate
function commitLifeCycles(
finishedRoot: FiberRoot,
current: Fiber | null,
finishedWork: Fiber,
committedExpirationTime: ExpirationTime,
): void {
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: ...
case ClassComponent: {
const instance = finishedWork.stateNode;
if (finishedWork.effectTag & Update) {
if (current === null) {
startPhaseTimer(finishedWork, 'componentDidMount');
instance.componentDidMount();
stopPhaseTimer();
} else {
const prevProps =
finishedWork.elementType === finishedWork.type
? current.memoizedProps
: resolveDefaultProps(finishedWork.type, current.memoizedProps);
const prevState = current.memoizedState;
startPhaseTimer(finishedWork, 'componentDidUpdate');
// We could update instance props and state here,
instance.componentDidUpdate(
prevProps,
prevState,
instance.__reactInternalSnapshotBeforeUpdate,
);
stopPhaseTimer();
}
}
const updateQueue = finishedWork.updateQueue;
if (updateQueue !== null) {
// 这里会调用state或props改变的callback函数
commitUpdateQueue(
finishedWork,
updateQueue,
instance,
committedExpirationTime,
);
}
return;
}
case HostRoot: ...
case HostComponent: ...
case HostText: ...
case HostPortal: ...
case Profiler:...
case SuspenseComponent:
...
default: ...
}
}
commitLifeCycles 运行实例:
Fiber Debugger
Fiber Debugger是React官方的一个图形化展示fiber运行过程的动态demo.
点击Edit按钮,可将以下代码复制到编辑框,点击运行Run即可查看
log('Render <div>Hello</div>');
ReactNoop.render(<div>Hello</div>);
ReactNoop.flush();
log('Render <h1>Goodbye</h1>');
ReactNoop.render(<h1>Goodbye</h1>);
ReactNoop.flush();
React Fiber源码就先看到这里,代码非常浩繁复杂,难免有理解不对的地方,如有大牛偶尔路过,希望不吝赐教:)