将Vnode渲染位真实dom

一、什么是虚拟dom

vnode 就是一个普通的javascript对象,用来描述我们的真实dom,举一个🌰哈。有一个<div class='extra'>我是div标签<div>,其对应的vnode为

javascript 复制代码
const vnode = {
    tagName: 'div',
    props: {class:'extra'},
    children:['我是div标签']
}

我们发现上面的vnode有tagName,props,children。下面写一个render函数,将上面的vnode渲染为真实dom

二、render 的实现

2.1 简单版本的实现

javascript 复制代码
const render = (vnode) => {
      let dom = document.createElement(vnode.tagName)
      
      if(vnode.props){
          Object.keys(vnode.props).forEach((key) => {
            let value = vnode.props[key]
            dom.setAttribute(key, value)
          })
      }
      
      if(vnode.children) {
          dom.innerText = vnode.children[0]
      }
      
      return dom
}

2.2 children 是多个且嵌套的实现

html 复制代码
<div class='layout-1'>
    我是第一个层 
    <div class="layout-2">
        我是第二层 
        <div class="layout-3">
            我是第三层
        </div>
    </div>
</div>

上面结构对应的vnode如下

javascript 复制代码
const vnode = {
    tagName:"div",
    props:{class:'layout-1'},
    children:[
        '我是第一个层',
        {
            tagName:'div',
            props: {class: 'layout-2'},
            children:[
                '我是第二层',
                {
                    tagName:"div",
                    props:{class:"layout-3"},
                    children:[
                        '我是第三层'
                    ]
                }
            ]
        }
    ]
}

将上面的vnode渲染为真实dom,只需要递归操作就可以了。代码如下

javascript 复制代码
const render = (vnode) => {
    if (typeof vnode == 'string') {
        return document.createTextNode(vnode)
    }

    let dom = document.createElement(vnode.tagName)
    if (vnode.props) {
      Object.keys(vnode.props).forEach((key) => {
        let value = vnode.props[key]
        dom.setAttribute(key, value)
      })
    }

    vnode.children &&
      vnode.children.forEach((element) => {
        dom.appendChild(render(element))
      })
    return dom
  }

上面这样我们就完成啦。当有children我们递归的去render,然后添加到child中,就可以完成嵌套的渲染了。

2.3 组件化渲染

我们日常开发用的框架Vue、React等框架,都是组件化开发,这些框架会讲我们写的jsx或者模板编译为渲染函数,最后调用这个渲染函数生成vnode。所以如果 vnode 是以function时只需要调用然后再render即可。

javascript 复制代码
let vnode = {
    tagName: 'ul',
    props: { class: 'list' },
    children: [
      {
        tagName: 'li',
        children: ['item1'],
      },
      {
        tagName: 'li',
        children: ['item1'],
      },
      () => ({
        tagName: 'h1',
        children: [
          {
            tagName: 'div',
            children: ['h1-div1'],
          },
          {
            tagName: 'div',
            children: ['h1-div2'],
          },
        ],
      }),
    ],
}

render 实现

javascript 复制代码
const render = (vnode) => {
    if (typeof vnode === 'function') {
      vnode = vnode()
    }
    if (typeof vnode == 'string') {
      return document.createTextNode(vnode)
    }

    let dom = document.createElement(vnode.tagName)
    if (vnode.props) {
      Object.keys(vnode.props).forEach((key) => {
        let value = vnode.props[key]
        dom.setAttribute(key, value)
      })
    }

    vnode.children &&
      vnode.children.forEach((element) => {
        dom.appendChild(render(element))
      })
    return dom
}

上面我们就实现了一个简单的渲染器哈。可以将vnode渲染为真实dom。

相关推荐
江号软件分享5 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享5 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海9 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子20 分钟前
深入理解TCP协议
前端·javascript·面试
万少21 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子7 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js