人人都能读懂的 react 源码解析(大厂高薪必备)
6.render 阶段(厉害了,我有创建 Fiber 的技能)
视频课程 &调试 demos
视频课程的目的是为了快速掌握 react 源码运行的过程和 react 中的 scheduler、reconciler、renderer、fiber 等,并且详细 debug 源码和分析,过程更清晰。
视频课程:进入课程
demos:demo
课程结构:
开篇(听说你还在艰难的啃react源码)
react心智模型(来来来,让大脑有react思维吧)
Fiber(我是在内存中的dom)
从legacy或concurrent开始(从入口开始,然后让我们奔向未来)
state更新流程(setState里到底发生了什么)
render阶段(厉害了,我有创建Fiber的技能)
commit阶段(听说renderer帮我们打好标记了,映射真实节点吧)
diff算法(妈妈再也不担心我的diff面试了)
hooks源码(想知道Function Component是怎样保存状态的嘛)
scheduler&lane模型(来看看任务是暂停、继续和插队的)
concurrent mode(并发模式是什么样的)
手写迷你react(短小精悍就是我)
render 阶段的入口
render 阶段的主要工作是构建 Fiber 树和生成 effectList,在第 5 章中我们知道了 react 入口的两种模式会进入 performSyncWorkOnRoot 或者 performConcurrentWorkOnRoot,而这两个方法分别会调用 workLoopSync 或者 workLoopConcurrent
function workLoopSync() {
while (workInProgress !== null) {
performUnitOfWork(workInProgress);
}
}
function workLoopConcurrent() {
while (workInProgress !== null && !shouldYield()) {
performUnitOfWork(workInProgress);
}
}
复制代码
这两函数的区别是判断条件是否存在 shouldYield 的执行,如果浏览器没有足够的时间,那么会终止 while 循环,也不会执行后面的 performUnitOfWork 函数,自然也不会执行后面的 render 阶段和 commit 阶段,这部分属于 scheduler 的知识点,我们在第 12 章讲解。
function performUnitOfWork(fiber) {
if (fiber.child) {
performUnitOfWork(fiber.child);//beginWork
}
if (fiber.sibling) {
performUnitOfWork(fiber.sibling);//completeWork
}
}
复制代码
render 阶段整体执行流程
看断点调试视频,函数执行细节更清楚详细:
用 demo_0 来看看执行过程
function App() {
return (
<div>
xiao
<p>chen</p>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
复制代码
当执行完深度优先遍历之后形成的 Fiber 树:
图中的数字是遍历过程中的顺序,可以看到,遍历的过程中会从应用的根节点 rootFiber 开始,依次执行 beginWork 和 completeWork,最后形成一颗 Fiber 树,每个节点以 child 和 return 相连。
注意:当遍历到只有一个子节点的 Fiber 时,该 Fiber 节点的子节点不会执行 beginWork 和 completeWork,如图中的‘chen’文本节点。这是 react 的一种优化手段
beginWork
beginWork 主要的工作是创建或复用子 fiber 节点
function beginWork(
current: Fiber | null,//当前存在于dom树中对应的Fiber树
workInProgress: Fiber,//正在构建的Fiber树
renderLanes: Lanes,//第12章在讲
): Fiber | null {
// 1.update时满足条件即可复用current fiber进入bailoutOnAlreadyFinishedWork函数
if (current !== null) {
const oldProps = current.memoizedProps;
const newProps = workInProgress.pendingProps;
if (
oldProps !== newProps ||
hasLegacyContextChanged() ||
(__DEV__ ? workInProgress.type !== current.type : false)
) {
didReceiveUpdate = true;
} else if (!includesSomeLane(renderLanes, updateLanes)) {
didReceiveUpdate = false;
switch (workInProgress.tag) {
// ...
}
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderLanes,
);
} else {
didReceiveUpdate = false;
}
} else {
didReceiveUpdate = false;
}
//2.根据tag来创建不同的fiber 最后进入reconcileChildren函数
switch (workInProgress.tag) {
case IndeterminateComponent:
// ...
case LazyComponent:
// ...
case FunctionComponent:
// ...
case ClassComponent:
// ...
case HostRoot:
// ...
case HostComponent:
// ...
case HostText:
// ...
}
}
复制代码
从代码中可以看到参数中有 current Fiber,也就是当前真实 dom 对应的 Fiber 树,在之前介绍 Fiber 双缓存机制中,我们知道在首次渲染时除了 rootFiber 外,current 等于 null,因为首次渲染 dom 还没构建出来,在 update 时 current 不等于 null,因为 update 时 dom 树已经存在了,所以 beginWork 函数中用 current === null 来判断是 mount 还是 update 进入不同的逻辑
mount:根据 fiber.tag 进入不同 fiber 的创建函数,最后都会调用到 reconcileChildren 创建子 Fiber
update:在构建 workInProgress 的时候,当满足条件时,会复用 current Fiber 来进行优化,也就是进入 bailoutOnAlreadyFinishedWork 的逻辑,能复用 didReceiveUpdate 变量是 false,复用的条件是
reconcileChildren/mountChildFibers
创建子 fiber 的过程会进入 reconcileChildren,该函数的作用是为 workInProgress fiber 节点生成它的 child fiber 即 workInProgress.child。然后继续深度优先遍历它的子节点执行相同的操作。
export function reconcileChildren(
current: Fiber | null,
workInProgress: Fiber,
nextChildren: any,
renderLanes: Lanes
) {
if (current === null) {
//mount时
workInProgress.child = mountChildFibers(
workInProgress,
null,
nextChildren,
renderLanes,
);
} else {
//update
workInProgress.child = reconcileChildFibers(
workInProgress,
current.child,
nextChildren,
renderLanes,
);
}
}
复制代码
reconcileChildren 会区分 mount 和 update 两种情况,进入 reconcileChildFibers 或 mountChildFibers,reconcileChildFibers 和 mountChildFibers 最终其实就是 ChildReconciler 传递不同的参数返回的函数,这个参数用来表示是否追踪副作用,在 ChildReconciler 中用 shouldTrackSideEffects 来判断是否为对应的节点打上 effectTag,例如如果一个节点需要进行插入操作,需要满足两个条件:
1. fiber.stateNode!==null 即fiber存在真实dom,真实dom保存在stateNode上
2. (fiber.effectTag & Placement) !== 0 fiber存在Placement的effectTag
复制代码
var reconcileChildFibers = ChildReconciler(true);
var mountChildFibers = ChildReconciler(false);
复制代码
function ChildReconciler(shouldTrackSideEffects) {
function placeChild(newFiber, lastPlacedIndex, newIndex) {
newFiber.index = newIndex;
if (!shouldTrackSideEffects) {//是否追踪副作用
// Noop.
return lastPlacedIndex;
}
var current = newFiber.alternate;
if (current !== null) {
var oldIndex = current.index;
if (oldIndex < lastPlacedIndex) {
// This is a move.
newFiber.flags = Placement;
return lastPlacedIndex;
} else {
// This item can stay in place.
return oldIndex;
}
} else {
// This is an insertion.
newFiber.flags = Placement;
return lastPlacedIndex;
}
}
}
复制代码
在之前心智模型的介绍中,我们知道为 Fiber 打上 effectTag 之后在 commit 阶段会被执行对应 dom 的增删改,而且在 reconcileChildren 的时候,rootFiber 是存在 alternate 的,即 rootFiber 存在对应的 current Fiber,所以 rootFiber 会走 reconcileChildFibers 的逻辑,所以 shouldTrackSideEffects 等于 true 会追踪副作用,最后为 rootFiber 打上 Placement 的 effectTag,然后将 dom 一次性插入,提高性能。
export const NoFlags = /* */ 0b0000000000000000000;
// 插入dom
export const Placement = /* */ 0b00000000000010;
复制代码
在源码的 ReactFiberFlags.js 文件中,用二进制位运算来判断是否存在 Placement,例如让 var a = NoFlags,如果需要在 a 上增加 Placement 的 effectTag,就只要 effectTag | Placement 就可以了
bailoutOnAlreadyFinishedWork
function bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes) {
//...
if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
return null;
} else {
cloneChildFibers(current, workInProgress);
return workInProgress.child;
}
}
复制代码
如果进入了 bailoutOnAlreadyFinishedWork 复用的逻辑,会判断优先级第 12 章介绍,优先级足够则进入 cloneChildFibers 否则返回 null
completeWork
completeWork 主要工作是处理 fiber 的 props、创建 dom、创建 effectList
function completeWork(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
): Fiber | null {
const newProps = workInProgress.pendingProps;
//根据workInProgress.tag进入不同逻辑,这里我们关注HostComponent,HostComponent,其他类型之后在讲
switch (workInProgress.tag) {
case IndeterminateComponent:
case LazyComponent:
case SimpleMemoComponent:
case HostRoot:
//...
case HostComponent: {
popHostContext(workInProgress);
const rootContainerInstance = getRootHostContainer();
const type = workInProgress.type;
if (current !== null && workInProgress.stateNode != null) {
// update时
updateHostComponent(
current,
workInProgress,
type,
newProps,
rootContainerInstance,
);
} else {
// mount时
const currentHostContext = getHostContext();
// 创建fiber对应的dom节点
const instance = createInstance(
type,
newProps,
rootContainerInstance,
currentHostContext,
workInProgress,
);
// 将后代dom节点插入刚创建的dom里
appendAllChildren(instance, workInProgress, false, false);
// dom节点赋值给fiber.stateNode
workInProgress.stateNode = instance;
// 处理props和updateHostComponent类似
if (
finalizeInitialChildren(
instance,
type,
newProps,
rootContainerInstance,
currentHostContext,
)
) {
markUpdate(workInProgress);
}
}
return null;
}
复制代码
从简化版的 completeWork 中可以看到,这个函数做了一下几件事
根据 workInProgress.tag 进入不同函数,我们以 HostComponent 举例
update 时(除了判断 current=null 外还需要判断 workInProgress.stateNode=null),调用 updateHostComponent 处理 props(包括 onClick、style、children …),并将处理好的 props 赋值给 updatePayload,最后会保存在 workInProgress.updateQueue 上
mount 时 调用 createInstance 创建 dom,将后代 dom 节点插入刚创建的 dom 中,调用 finalizeInitialChildren 处理 props(和 updateHostComponent 处理的逻辑类似)
评论