React源码解读

本片用于记录阅读《React设计原理》的架构篇读书笔记。持续完成更新…..

阅读React设计原理，解读Reconciler三个工作阶段：render、commot、schedule

render阶段

render阶段可能开始于performSyncWorkOnRoot（同步更新流程）或performConcurrentWorkRoot（并发更新阶段）

function workLoopSync() {
	while (workInProgress !== null){
		performUnitOfWork(workInProgress);
	}
}

function workLoopConcurrent() {
	while (workInProgress !== null && !shouldYieId()){
		performUnitOfWork(workInProgress);
	}
}

同步更新流程和并发更新流程方法唯一区别是调用”shouldYieId ⇒ 是否可中断“

function performUnitOfWork(filberNode) {
	//省略执行beginWork工作
	if(fiberNode.child) {
		performUnitOfWork(fiberNode.child)
	}
	//省略执行completeWork工作
	if(fiberNode.sibling){
		performUnitOfWork(fiberNode.sibling)
	}
}

beginWork工作流程

判断当前流程属于mount还是update流程，根据wip.tag进入不同类型元素的处理分支，使用reconcile算法生成下一级fiberNode

较比update阶段可复用fiber节点时，会给生成的fiberNode带上副作用flags。

flags标记：

• ChildDeletion，代表删除操作
• Placement，代表插入或移动操作

completeWork工作流程

1. 创建或者标记元素更新
2. flags冒泡

完成工作流程1（更新的标记）之后，更新中的增删改操作均已完成，Reconciler中的解析flags。

Reconciler工作流程采用DFS的顺序构建WipFiberTree。整个过程分为“递”和“归”两个阶段，分别对应beginWork和completeWork。

最终HostRootFiber完成completeWork时，Reconciler的工作流程结束。此时我们可以得到：

• 代表本次更新的Wip Fiber Tree
• 被标记的flags

---

commit阶段

在commit阶段会将各种副作用（flags表示）commit（提交）到宿主环境UI中。

render阶段流程可能被打断，而commit阶段一旦开始就会同步执行完成。

整个阶段分为以下三个子阶段

• BeforeMutation阶段 DOM操作前
• Mutation阶段 操作DOM元素的增删改
• Layout阶段 执行DOM操作后

BeforeMutation阶段主要与Update、Snapshot两个flags相关。
Mutation阶段包含的flags大多是完成”Ui相关副作用“。