Version 3.0.4, go here to see the full source code
Let’s start with a simple example:
It looks like this:
Now let’s take a look at “ha ha ha” these three words are how to render out, first look at the source of this position
Print this out
You can see here that this is actually a description of this code
The outermost tag is div, which contains a child element, children, which contains a content variable, text
Continue down to the source code location
Print this out
I see a string that looks like a Function, and yes, that string can be converted to a real Function as an argument with new Function. The _createBlock function handles the div tag, and the third argument is the stuff inside the div, handled by the _toDisplayString function, which contains the variable text
Take a look at the result returned after this function is run, the source is located here
Print this out
The result shows that the variable text has been assigned to “hahaha”, and then the patch process, which is to compare the differences between the two subtrees and update the DOM. Why there are two subtrees? Because when we interact with the page, we change the state, create a new subtree, and then the old and new subtrees can be compared. But we are only looking at the initialization (first render) process now, without the previous subtree, patch will be discussed later.
From the above, you can know the general process:
Generate ast = = = = = = = = > > generate render function generated subtree = = = = > patch = = = = > render a page
The details of each stage will be explained later.