【Under-the-hood-ReactJS-Part2】React源码解读

2024年1月28日 141次阅读 来源: 剡山

接上文，

React流程图：
https://bogdan-lyashenko.gith…

另外一个事务类

这次，我们将分析ReactReconcileTransaction。正如之前的文章里所讲，我们关注的重点是事务包装器，ReactReconcileTransaction中有三个包装器：

//\src\renderers\dom\client\ReactReconcileTransaction.js#89
var TRANSACTION_WRAPPERS = [
  SELECTION_RESTORATION,
  EVENT_SUPPRESSION,
  ON_DOM_READY_QUEUEING,
];

从流程图中能看出，这些包装器的主要用途是用来保存当前DOM的实际状态，在方法被调用前锁定一些变化值，然后方法调用后重置这些值。React就是通过事务确保达到这些目标，比如，通过执行事务（在事务开始时获取选择的内容然后在结束时恢复选择的内容）来确保选择内容不受干扰（input输入框中的被选中内容），同时，ReactReconcileTransaction也会阻止那些由外层DOM操作（比如暂时性的将input中内容移除）引发的事件（失焦/聚焦），为了达到这个目的，它会在事务开始时关闭ReactBrowserEventEmitter,然后在关闭时重新开启。

现在，我们快到组件的挂载开始阶段了，在这个阶段，会返回将插入到DOM的标签文本。其实，ReactReconciler.mountComponent只是一个包装器，或者更准确的说，是一个中介，它把挂载方法委托给组件模块。这里有个关键点：

在实现一些平台相关的逻辑时，ReactReconciler模块将会被调用。在不同的平台，挂载的过程是不一样的，所以，主模块会和ReactReconciler进行交互，而ReactReconciler则清楚下一步的工作。

现在我们就回到了组件方法 mountComponent。 这个方法你很可能已经见过了。它会执行组件的初始化，渲染html标记并注册事件监听器。经过一段长长的调用，我们终于看到了组件挂载方法被调用。执行挂载方法后，我们就会得到将插入DOM的真正的HTML元素。
（未完待续）

    原文作者：剡山
    原文地址: https://segmentfault.com/a/1190000015425254
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞