前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2. 「snabbdom@3.5.1 源码分析」h函数 和 虚拟DOM

2. 「snabbdom@3.5.1 源码分析」h函数 和 虚拟DOM

作者头像
tinyant
发布2023-02-24 10:05:47
2180
发布2023-02-24 10:05:47
举报

h函数(创建虚拟DOM)

h可以理解为createVirtualDom即创建虚拟节点。

代码语言:javascript
复制
export function h(sel, b, c) {
    //... 由于h函数有多重重载形式,这部分是处理参数
    
    if (children !== undefined) {
        for (i = 0; i < children.length; ++i) {
            // 如果孩子是原始类型,直接创建vnode
            if (is.primitive(children[i]))
                children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
        }
    }
    
    //... svg情况 添加namespace
    
    return vnode(sel, data, children, text, undefined);
}
  1. 传递的children正常应该是一个vnode,不过如果是原始类型,框架会帮你处理。
  2. new vnode(...)并返回
  3. 注意:childrentext只会有一个生效传递给vnode构造函数,见源码:h.ts-因为else-if

vnode

代码语言:javascript
复制
export function vnode(sel, data, children, text, elm) {
    const key = data === undefined ? undefined : data.key;
    return { sel, data, children, text, elm, key };
}

就是这么简单,一个js对象,别无其他。 重点看看每个属性的类型,参考

  1. sel:如 div#container.classA.classB
  2. data
    • 存储一些信息以提供给模块访问,模块会在某些钩子(可以理解为真实DOM在创建和更新过程的生命周期)中根据这些信息来设置真实DOM信息,比如设置class、样式、事件、属性等等。
    • snabbdom本身并没有限制data中的内容,如果开发者提供了自己的module希望在创建真实DOM时用到某些信息,就可以放到dat中,当调用该module钩子时,可以拿到这些信息。
  3. children:孩子虚拟节点
  4. text:创建一个文本类型虚拟节点,作为sel的孩子(注意:会假设sel只有这一个孩子)
  5. elm:该虚拟节点关联的真实DOM
  6. key:标识虚拟节点,通常在列表处用到,以达到复用真实DOM效果从而提供性能(创建真实DOM耗费性能)

总结

没什么好说的,下节说下init函数及其返回的patch函数

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • h函数(创建虚拟DOM)
  • vnode
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档