人人都能读懂的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章讲解。
- workInProgress：新创建的workInProgress fiber
- performUnitOfWork：workInProgress fiber和会和已经创建的Fiber连接起来形成Fiber树。这个过程类似深度优先遍历，我们暂且称它们为‘捕获阶段’和‘冒泡阶段’。执行的过程大概如下
function performUnitOfWork(fiber) {
if (fiber.child) {
performUnitOfWork(fiber.child);//beginWork
}
if (fiber.sibling) {
performUnitOfWork(fiber.sibling);//completeWork
}
} render阶段整体执行流程
看断点调试视频，函数执行细节更清楚详细：
用demo_0来看看执行过程
- 捕获阶段
从根节点rootFiber开始，遍历到叶子节点，每次遍历到的节点都会执行beginWork，并且传入当前Fiber节点，然后创建或复用它的子Fiber节点，并赋值给workInProgress.child。
- 冒泡阶段
在捕获阶段遍历到子节点之后，会执行completeWork方法，执行完成之后会判断此节点的兄弟节点存不存在，如果存在就会为兄弟节点执行completeWork，当全部兄弟节点执行完之后，会向上‘冒泡’到父节点执行completeWork，直到rootFiber。
- 示例
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，复用的条件是
- oldProps === newProps && workInProgress.type === current.type 属性和fiber的type不变
- !includesSomeLane(renderLanes, updateLanes) 更新的优先级是否足够，第12章讲解
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处理的逻辑类似）
之前我们有说到在beginWork的mount时，rootFiber存在对应的current，所以他会执行mountChildFibers打上Placement的effectTag，在冒泡阶段也就是执行completeWork时，我们将子孙节点通过appendAllChildren挂载到新创建的dom节点上，最后就可以一次性将内存中的节点用dom原生方法反应到真实dom中。
在beginWork 中我们知道有的节点被打上了effectTag的标记，有的没有，而在commit阶段时要遍历所有包含effectTag的Fiber来执行对应的增删改，那我们还需要从Fiber树中找到这些带effectTag的节点嘛，答案是不需要的，这里是以空间换时间，在执行completeWork的时候遇到了带effectTag的节点，会将这个节点加入一个叫effectList中,所以在commit阶段只要遍历effectList就可以了（rootFiber.firstEffect.nextEffect就可以访问带effectTag的Fiber了）
effectList的指针操作发生在completeUnitOfWork函数中，例如我们的应用是这样的
function App() { const [count, setCount] = useState(0); return ( <div className="App"> <p onClick={() => setCount(() => count + 1)}> <h1 title={count}>{count}</h1> and save to reload. </p> </div> ); }那么我们的操作effectList指针如下（这张图是操作指针过程中的图，此时遍历到了app Fiber节点，当遍历到rootFiber时，h1，p节点会和rootFiber形成环状链表）
rootFiber.firstEffect===h1 rootFiber.firstEffect.next===p最后生成的fiber树如下
然后commitRoot(root);进入commit阶段
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。