前端面试题 - 68. 虚拟DOM转真实DOM

题目

const vnode = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [{
            tag: 'SPAN',
            children: [{
                tag: 'A',
                children: []
            }]
        },
        {
            tag: 'SPAN',
            children: [{
                    tag: 'A',
                    children: []
                },
                {
                    tag: 'A',
                    children: []
                }
            ]
        }
    ]
}

function render(vnode) {

}

思路

虚拟DOM转真实DOM的过程是一个递归的过程，我们可以使用递归函数来实现。具体实现过程如下：

function render(vnode) {
  // 如果vnode是字符串或数字类型，直接创建文本节点并返回
  if (typeof vnode === 'string' || typeof vnode === 'number') {
    return document.createTextNode(vnode)
  }
  
  // 否则，创建元素节点
  const el = document.createElement(vnode.tag)
  // 设置元素节点的属性
  for (const key in vnode.attrs) {
    el.setAttribute(key, vnode.attrs[key])
  }
  // 递归处理子节点
  vnode.children.forEach(child => {
    el.appendChild(render(child))
  })
  // 返回创建的元素节点
  return el
}

在这个实现中，我们先判断当前节点是不是字符串或数字类型，如果是的话，直接创建文本节点并返回。否则，我们创建一个元素节点，并将节点的属性设置为vnode.attrs中的属性。接着，我们递归处理子节点，并将子节点添加到当前节点中。最后，我们返回创建的元素节点。这样，就可以将虚拟DOM转换成真实DOM了。