h
可以理解为createVirtualDom即创建虚拟节点。
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);
}
new vnode(...)
并返回children
和text
只会有一个生效传递给vnode
构造函数,见源码:h.ts-因为else-ifexport function vnode(sel, data, children, text, elm) {
const key = data === undefined ? undefined : data.key;
return { sel, data, children, text, elm, key };
}
就是这么简单,一个js对象,别无其他。 重点看看每个属性的类型,参考
div#container.classA.classB
钩子
(可以理解为真实DOM在创建和更新过程的生命周期)中根据这些信息来设置真实DOM信息,比如设置class、样式、事件、属性等等。sel
的孩子(注意:会假设sel
只有这一个孩子)
没什么好说的,下节说下init
函数及其返回的patch
函数