虚拟DOM如何被渲染产生的？(虚拟DOM和diff算法（上）)

总萌大人

于 2024-08-10 19:26:24 发布

阅读量143

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_76917834/article/details/141093961

版权

虚拟DOM如何被渲染产生的?

答：h函数

h函数的使用：

1.产生虚拟节点(vnode)

2.h函数可以嵌套，从而得到虚拟DOM树

1.产生虚拟节点

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

// 创建出patch函数(diff算法的核心函数)
const patch =init([classModule,propsModule,styleModule,eventListenersModule,])
//一.h函数创建虚拟节点
const myVnode1=h('a',{
    props:
    {
        href:'https://github.com/snabbdom/snabbdom',
        target:'_blank'//在新的标签页打开网页
    }
},'h函数创建虚拟节点')
// 打印虚拟节点的属性
console.log(myVnode1);


// 二.让虚拟节点上树(显示在页面上)
const container =document.getElementById('container')
patch(container,myVnode1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <script src="/xuni/bundle.js"></script>
</body>
</html>

// 打印虚拟节点的属性console.log(myVnode1);

2.h函数可以嵌套，从而得到虚拟DOM树

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

// 创建出patch函数(diff算法的核心函数)
const patch =init([classModule,propsModule,styleModule,eventListenersModule,])


// h函数可以嵌套，从而得到虚拟DOM树
const myVnode2 =h('ul',[
    h('li',{},'跳舞'),
    h('li','唱歌'),
    h('li',[
        h('div',[
            h('p','你好'),
            h('p','哈哈')
        ])
    ]),
    h('li','打篮球'),


])
// 让虚拟节点上树(显示在页面上)
const container =document.getElementById('container')
patch(container,myVnode2)