资讯专栏INFORMATION COLUMN

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

solocoder / 3136人阅读

摘要:但是事实上,标签是生成了,但是不管他叫什么不是真正的标签。是个工具类,用于执行一些树数据结构的真正作用于的相关操作。终于,在挂载过程中被创建的元素被插入到文档中。我们检查下的包装器,它是用来处理的。

接上文,

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

回到最初

作为挂载方法执行之后的输出,我们得到了将用于插入DOM树的HTML元素。但是事实上,标签是生成了,但是mountComponenent--不管他叫什么---不是真正的HTML标签。它其实是一种拥有字段children,node(真正的DOM节点)等的数据结构。当我们将HTML元素插入到DOM中指定的容器时(在ReactDOM.render方法中指定的容器),React会将容器中插入位置之前的内容给删除。DOMLazyTree是个工具类,用于执行一些树数据结构的真正作用于DOM的相关操作。
在最好的过程中,会执行parentNode.insertBefore(tree.node)方法,其中,parentNode是插入的容器中div节点,而tree.node则是我们真正的ExamleApplication对应的div节点。终于,在挂载过程中被创建的HTML元素被插入到DOM文档中。

其实,上面步骤不是全部,如前文所讲,对挂载的调用是被包装进了一个事务中。也就是说,我们需要调用close方法来关闭这个事务。我们看下close包装器列表,大多数情况下,我们需要恢复一些锁定的行为,比如ReactInputSelection.restoreSelection(),ReactBrowserEventEmitter.setEnabled(previouslyEabled),同时,也需要通过this.reactMountReady.notifyAll来通知执行所有之前放入transaction.reactMountReady队列里的回调。其中之一就是componentDidMount方法,这个方法会在close包装器里被触发。
现在,你应该对component did mount的含义有个比较清楚的认识了。

更多有关关闭事务

在挂载过程中,使用的事务不止上文的那一个,还有一个我们之前用来包装ReactMount.atchedMountComponentIntoNode的调用。这个是需要关闭。

我们检查下ReactUpdates.flushBatchedUpdates的包装器,它是用来处理dirtyComponents的。我们刚刚完成了我们的第一次挂载,这时候是没有dirtycomponents的,也就是说,在这次挂载中,它是一个空调用。所以,我们可以关闭这次事务,并且可以说,批量更新策略已经完成了。
(未完待续)

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

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

相关文章

  • Under-the-hood-ReactJS-Part11】React源码解读

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

    hiyayiji 评论0 收藏0
  • Under-the-hood-ReactJS-Part8】React源码解读

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

    zhoutk 评论0 收藏0
  • Under-the-hood-ReactJS-Part6】React源码解读

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

    codergarden 评论0 收藏0
  • Under-the-hood-ReactJS-Part9】React源码解读

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

    SnaiLiu 评论0 收藏0
  • Under-the-hood-ReactJS-Part13】React源码解读

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

    jerryloveemily 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<