实现初始化 element
- 走 render 方法时,调用 patch ,区分 element 和 component
- 遇到 element, 代码如下
js
// renderer.ts
function patch(vnode, container) {
// 对类型进行区分
if (typeof vnode.type === 'string') {
processElement(vnode, container)
} else if (isObject(vnode.type)) {
processComponent(vnode, container)
}
}
function processElement(vnode, container) {
mountElement(vnode, container)
}
function mountElement(vnode, container) {
const { type, props, children } = vnode
const el = document.createElement(type)
if (typeof children === 'string') {
el.textContent = children
} else if (Array.isArray(children)) {
mountChildren(children, el)
}
for (let key in props) {
let val = props[key]
el.setAttribute(key, val)
}
container.append(el)
}
function mountChildren(children, el) {
children.forEach(vnode => {
patch(vnode, el)
})
}