7.0 Part 7 (clickable)
Back to the beginning
After mounting as result of method execution, we have HTML elements which are ready to be set into a document. Actually,
markup (1) is generated, but
mountComponent, despite how it’s named, is not actually HTML markup. It’s a data structure with fields
node (actual DOM nodes), etc. But, we have our HTML element to put into the container (the one specified as the container in the
ReactDOM.render call). While adding it into DOM, React will erase everything that was there before.
DOMLazyTree(2) is a utils class that performs some operations with tree data structures, which we’re actually doing during work with the DOM.
The last thing is
parentNode is the container
div node and
tree.node is actually our
ExampleAppliication div node. Nice, the HTML elements that were created during mounting were finally inserted into the document.
So, that’s it? Not exactly. As you remember, the
mount call was wrapped into a transaction. It means that we should close it. Let’s check our
close wrappers list. Mostly, we should restore some locked behavior
ReactBrowserEventEmitter.setEnabled(previouslyEnabled), but also, we will notify all of the callbacks
this.reactMountReady.notifyAll(4) we put into
transaction.reactMountReady queue before. One of them is our favorite
componentDidMount, which will be triggered exactly by the
Now you have a clear picture of what ‘component did mount’ actually means. Cheers!
One more transaction to close
Well, actually, that transaction was not only one. We forgot one more which was used to wrap the
ReactMount.batchedMountComponentIntoNode call. Let’s close it as well.
Here, we check the wrapper
ReactUpdates.flushBatchedUpdates(5), which will process
dirtyComponents. Sounds interesting, ya? Well, it’s good or bad news. We just did our first mount, so there are no dirty components yet. It means that it’s an idle call. So, we can close this transaction as well and say that the batching strategy updates are done.
Alright, we’ve finished Part 7.
Let’s recap how we got here. Let’s look at the scheme one more time, then remove redundant less important pieces, and it becomes this:
7.1 Part 7 simplified (clickable)
And we should probably fix spaces and alignment as well:
7.2 Part 7 simplified & refactored (clickable)
Nice. In fact, that’s all that happens here. So, we can take the essential value from Part 7 and use it for the final
7.3 Part 7 essential value (clickable)
And then we’re done! In fact, we’re done with mounting. Let’s see it below!
7.4 Mounting (clickable)
To the next page: Part 8 »
« To the previous page: Part 6