React源码分析5——commit剖析

React在render阶段的completeUnitWork执行完毕后，就执行commitRoot进入到了commit阶段，本章将讲解commit阶段执行过程源码。

commitRoot函数位于react-reconciler/src/ReactFiberCommitWork.js文件中，其函数签名如下：

function commitRoot(root: FiberRoot, finishedWork: Fiber | null): void;

commitRoot函数的参数为root和finishedWork，其中root是FiberRoot类型，finishedWork是Fiber类型，分别表示当前Fiber树的根节点和需要提交的Fiber节点。

commitRoot函数的执行过程大致分为以下几个步骤：

1. 调用prepareForCommit()函数

该函数负责为提交做准备，包括：

• 清理已删除的节点
• 将已更新的节点标记为已提交
• 计算每个已更新节点的有效优先级

2. 调用commitPlacement()函数

该函数负责将新的DOM节点插入到正确的父节点中，并更新现有DOM节点的属性。

3. 调用commitDeletion()函数

该函数负责删除已删除的DOM节点。

4. 调用commitWork()函数

该函数负责将已更新的节点标记为已提交，并更新DOM节点的属性。

5. 调用commitLifeCycles()函数

该函数负责触发已更新节点的生命周期函数，包括componentDidMount、componentDidUpdate和componentWillUnmount。

6. 调用commitAttachRef()函数

该函数负责将ref属性附加到已更新的DOM节点。

7. 调用commitDetachRef()函数

该函数负责从已删除的DOM节点中分离ref属性。

8. 调用commitResetTextContent()函数

该函数负责重置文本节点的内容。

9. 调用commitMount()函数

该函数负责将已插入的DOM节点挂载到文档中。

10. 调用commitUpdate()函数

该函数负责更新已更新的DOM节点的属性。

11. 调用commitUnmount()函数

该函数负责卸载已删除的DOM节点。

12. 调用invokeGuardedCallback()函数

该函数负责调用提交后的回调函数，并将错误处理程序包装在回调函数中。

13. 调用onCommitRoot()函数

该函数负责触发onCommitRoot回调函数，该回调函数通常用于性能分析。

commitRoot函数的执行过程相对复杂，但它对理解React的渲染机制非常重要。通过仔细研究commitRoot函数的源码，我们可以更好地掌握React的运作原理，进而提高我们的React开发技能。