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

接上文,

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://segmentfault.com/a/1190000015437117
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞