点击进入React源码调试仓库。
本篇是详细解读React DOM操作的第壹篇文章,文章所讲的内容发生在commit阶段。
Fiber架构使得React需要维护两类树结构,壹类是Fiber树,另壹类是DOM树。当删除DOM节点时,Fiber树也要同步变化。但请注意删除操作执行的时机:在完成DOM节点的其他变化(增、改)前,要先删除fiber节点,避免其他操作被干扰。 这是因为进行其他DOM操作时需要循环fiber树,此时如果有需要删除的fiber节点却还没删除的话,就会发生混乱。
function commitMutationEffects(
firstChild: Fiber,
root: FiberRoot,
renderPriorityLevel,
) {
let fiber = firstChild;
while (fiber !== null) {
// 首先进行删除
const deletions = fiber.deletions;
if (deletions !== null) {
commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
}
// 如果删除之後的fiber还有子节点,
// 递归调用commitMutationEffects来处理
if (fiber.child !== null) {
const primarySubtreeTag = fiber.subtreeTag & MutationSubtreeTag;
if (primarySubtreeTag !== NoSubtreeTag) {
commitMutationEffects(fiber.child, root, renderPriorityLevel);
}
}
if (__DEV__) {/*...*/} else {
// 执行其他DOM操作
try {
commitMutationEffectsImpl(fiber, root, renderPriorityLevel);
} catch (error) {
captureCommitPhaseError(fiber, error);
}
}
fiber = fiber.sibling;
}
}
fiber.deletions是render阶段的diff过程检测到fiber的子节点如果有需要被删除的,就会被加到这里来。
commitDeletion
函数是删除节点的入口,它通过调用unmountHostComponents
实现删除。搞懂删除操作之前,先看看场景。
有如下的Fiber树,Node(Node是壹个代号,并不指的某个具体节点)节点即将被删除。
Fiber树
div#root
|
<App/>
|
div
|
<Parent/>
|
Delation --> Node
| ↖
| ↖
P ——————> <Child>
|
a
通过这种场景可以推测出当删除该节点时,它下面子树中的所有节点都要被删除。现在直接以这个场景为例,走壹下删除过程。这个过程实际上也就是unmountHostComponents
函数的运行机制。
删除Node节点需要父DOM节点的参与:
parentInstance.removeChild(child)
所以首先要定位到父级节点。过程是在Fiber树中,以Node的父节点为起点往上找,找到的第壹个原生DOM节点即为父节点。在例子中,父节点就是div。此後以Node为起点,遍历子树,子树也是fiber树,因此遍历是深度优先遍历,将每个子节点都删除。
需要特别注意的壹点是,对循环节点进行删除,每个节点都会被删除操作去处理,这里的每个节点是fiber节点而不是DOM节点。DOM节点的删除时机是从Node开始遍历进行删除的时候,遇到了第壹个原生DOM节点(HostComponent或HostText)这个时刻,在删除了它子树的所有fiber节点後,才会被删除。
以上是完整过程的简述,对於详细过程要明确几个关键函数的职责和调用关系才行。删除fiber节点的是unmountHostComponents
函数,被删除的节点称为目标节点,它的职责为:
其中第3步的操作,是通过commitNestedUnmounts
完成的,它的职责很单壹也很明确,就是遍历子树卸载节点。
然後具体到每个节点的卸载过程,由commitUnmount
完成。它的职责是
unmountHostComponents
重复删除过程下面来看壹下不同类型的组件它们的具体删除过程是怎样的。
Node节点的类型有多种可能性,我们以最典型的三种类型(HostComponent、ClassComponent、HostPortal
)为例分别说明壹下删除过程。
首先执行unmountHostComponents
,会向上找到DOM层面的父节点,然後根据下面的三种组件类型分别处理,我们挨个来看。
Node 是HostComponent,调用commitNestedUnmounts
,以Node为起点,遍历子树,开始对所有子Fiber进行卸载操作,遍历的过程是深度优先遍历。
Delation --> Node(span)
| ↖
| ↖
P ——————> <Child>
|
a
对节点逐个执行commitUnmount
进行卸载,这个遍历过程其实对於三种类型的节点,都是类似的,为了节省篇幅,这里只表述壹次。
Node的fiber被卸载,然後向下,p的fiber被卸载,p没有child,找到它的sibling<Child>
,<Child>
的fiber被卸载,向下找到a,a的fiber被卸载。此时到了整个子树的叶子节点,开始向上return。由a 到 <Child>
,再回到Node,遍历卸载的过程结束。
在子树的所有fiber节点都被卸载之後,才可以安全地将Node的DOM节点从父节点中移除。
Delation --> Node(ClassComponent)
|
|
span
| ↖
| ↖
P ——————> <Child>
|
a
Node是ClassComponent,它没有对应的DOM节点,要先调用commitUnmount
卸载它自己,之後会先往下找,找到第壹个原生DOM类型的节点span,以它为起点遍历子树,确保每壹个fiber节点都被卸载,之後再将span从父节点中删除。
div2(Container Of Node)
↗
div containerInfo
| ↗
| ↗
Delation --> Node(HostPortal)
|
|
span
| ↖
| ↖
P ——————> <Child>
|
a
Node是HostPortal,它没有对应的DOM节点,因此删除过程和ClassComponent基本壹致,不同的是删除它下面第壹个子fiber的DOM节点时不是从这个被删除的HostPortal类型节点的DOM层面的父节点中删除,而是从HostPortal的containerInfo中移除,图示上为div2,因为HostPortal会将子节点渲染到父组件以外的DOM节点。
以上是三种类型节点的删除过程,这里值得注意的是,unmountHostComponents
函数执行到遍历子树卸载每个节点的时候,壹旦遇到HostPortal类型的子节点,会再次调用unmountHostComponents
,以它为目标节点再进行它以及它子树的卸载删除操作,相当於壹个递归过程。
HostComponent 和 ClassComponent的删除都调用了commitUnmount,除此之外还有FunctionComponent也会调用它。它的作用对三种组件是不同的:
function commitUnmount(
finishedRoot: FiberRoot,
current: Fiber,
renderPriorityLevel: ReactPriorityLevel,
): void {
onCommitUnmount(current);
switch (current.tag) {
case FunctionComponent:
case ForwardRef:
case MemoComponent:
case SimpleMemoComponent:
case Block: {
const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
if (updateQueue !== null) {
const lastEffect = updateQueue.lastEffect;
if (lastEffect !== null) {
const firstEffect = lastEffect.next;
let effect = firstEffect;
do {
const {destroy, tag} = effect;
if (destroy !== undefined) {
if ((tag & HookPassive) !== NoHookEffect) {
// 向useEffect的销毁函数队列里push effect
enqueuePendingPassiveHookEffectUnmount(current, effect);
} else {
// 尝试使用try...catch调用destroy
safelyCallDestroy(current, destroy);
...
}
}
effect = effect.next;
} while (effect !== firstEffect);
}
}
return;
}
case ClassComponent: {
safelyDetachRef(current);
const instance = current.stateNode;
// 调用componentWillUnmount
if (typeof instance.componentWillUnmount === 'function') {
safelyCallComponentWillUnmount(current, instance);
}
return;
}
case HostComponent: {
// 卸载ref
safelyDetachRef(current);
return;
}
...
}
}
我们来复盘壹下删除过程中的重点:
mutation在基於Fiber节点对DOM做其他操作之前,需要先删除节点,保证留给後续操作的fiber节点都是有效的。删除的目标是Fiber节点及其子树和Fiber节点对应的DOM节点,整个轨迹循着fiber树,对目标节点和所有子节点都进行卸载,对目标节点对应的(或之下的第壹个)DOM节点进行删除。对於原生DOM类型的节点,直接从其父DOM节点删除,对於HostPortal节点,它会把子节点渲染到外部的DOM节点,所以会从这个DOM节点中删除。明确以上三个点再结合上述梳理的过程,就可以逐渐理清删除操作的脉络。
<<: Golang-Channel & Goroutine-进阶篇
想走嵌入式系统开发这行必经的路,直接了解最底层怎麽运作的,Arduino底层也是这样运作的,只是Ar...
今天的实作内容主要根据网路资源进行。 Django并没有提供官方的社群登入整合模组,在第三方套件上,...
DE2_115(DAY3)以niosii去控制板子上的sdram 承接DAY2做的事情(https:...
使用 MySQLi MySQLi 全称 MySQL Improved extension, 算是 M...
建立好自己完整的表格之後,就可以开始搜寻自己要的东西了 SELECT * (全部栏位) FROM 什...