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

MartinHan 发布于2019-08-22 18:22 / 684人阅读

摘要：接上文，流程图另外一个事务类这次，我们将分析。在不同的平台，挂载的过程是不一样的，所以，主模块会和进行交互，而则清楚下一步的工作。它会执行组件的初始化，渲染标记并注册事件监听器。执行挂载方法后，我们就会得到将插入的真正的元素。

接上文，

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

另外一个事务类

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

//src
enderersdomclientReactReconcileTransaction.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元素。
（未完待续）

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95780.html

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

摘要：源码里有个独立的模块管理组件的所有子元素。第一个，实例化子元素使用并挂载它们。至于具体挂载流程，基于子元素类型的不同而有不同的挂载过程。挂载的过程基本完成了。接上文， React流程图：https://bogdan-lyashenko.gith... 创建初始子组件在之前的步骤里，组件本身的构建已经完成，接下去，我们分析它们的子元素。总共分为两步：挂载子元素（this.mountC...

codergarden 2019-08-22 18:24 评论0 收藏0
【Under-the-hood-ReactJS-Part9】React源码解读

摘要：当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。在这之后，会将这些事件处理成常见到样子。接上文， React流程图：https://bogdan-lyashenko.gith... 回到最初在流程图中，也许你已经注意到，setState方法可以通过几种方式触发，更准确的说，可以分为是否由外部引起的（也就是是否由用户触发）。让我们看下如下...

SnaiLiu 2019-08-22 18:29 评论0 收藏0
【Under-the-hood-ReactJS-Part11】React源码解读

摘要：技术上来说，当方法被调用后或者发生改变后，方法都会被调用。下一步，会设置为。之后，检测当前更新是否由更新引起的。这是因为，使用是导致组件持久化更新，而会被方法的返回值重新赋值。接上文， React流程图：https://bogdan-lyashenko.gith... 更新组件关于组件的更新，我们先看下代码里的注释：对于已挂载组件的更新过程，React会首先调用component...

hiyayiji 2019-08-22 18:30 评论0 收藏0
【Under-the-hood-ReactJS-Part8】React源码解读

摘要：接上文，流程图我们已经知道挂载的工作流程，现在我们换个方向研究下方法，这个也是的重要组成部分。这个问题，我们会在下一篇文章中进行解答。。。接上文， React流程图：https://bogdan-lyashenko.gith... this.setState 我们已经知道挂载的工作流程，现在我们换个方向研究下--setState方法，这个也是React的重要组成部分。首先，为什么我...

zhoutk 2019-08-22 18:25 评论0 收藏0
【Under-the-hood-ReactJS-Part13】React源码解读

摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。接上文， React流程图：https://bogdan-lyashenko.gith... 如果组件真的需要更新在组件刚开始更新过程时，如果有定义componentWillUpdate方...

jerryloveemily 2019-08-22 18:32 评论0 收藏0