Vue diff algorithm and virtual dom knowledge finishing (4) h function virtual node nesting

Then first add that there is a point that is not emphasized above.
When you don’t need the attribute, the h function can actually not be passed.
For example, we open the case and open index.js under src
to modify the code as follows

import {
    
    
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
 
  //创建虚拟节点
  var vonm = h("duv","你好");

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,vonm);

Declaring the label as div does not require any label attributes, so we just tell him the div, and then the next parameter is directly related to the text inside. The program can also recognize it. We run the project and we can see that

everything is normal, so this h function is still very useful

Then our virtual dom nodes can nest virtual dom nodes.
Simply put, a virtual dom node is used as a child node of another virtual dom.
The h function can be nested

Here it can be simply understood that the h function declares a virtual ul dom node. The second parameter does not pass attributes and the third parameter directly gives an array. Each array is a virtual dom node declared by the h function, so it
is Will become his child node

Here we change the index.js code under src as follows

import {
    
    
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li","C#")
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);

Because our ul does not need label attributes, the second parameter of the h function is not used. The direct label type is followed by an array of child nodes,
and each child node is a li virtual node declared by the h function. They also do not need label attributes. There is no second attribute parameter directly followed by the text content.
Then we run the project

and we can see that our complete unordered list comes out.

If there are more levels, just go down and set the array all the way.
For example

import {
    
    
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",[
      h("div","嘻嘻哈哈")
    ])
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);

In this way, our third li has another div inside.
We can see the interface effect

without any problems.

Some people may think that I have to make an array for just one node?
This developer also figured out that
we can change it to this

import {
    
    
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",h("div","嘻嘻哈哈"))
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);

The effect is the same. You can use

an array when there are multiple numbers.
You can use an array when you are single, but you can also directly write a virtual node declared by the h function. The latter is definitely more friendly.

Well, the h function is very flexible, and everyone can feel it

So I will talk about this h function in the next article