带你手写vnode到renderDom

前言

本文分为

• vnode树的构建
• render 的渲染
• 数据变更后的diff
• 拿到变更后的patch

项目搭建

npm i -g create-react-app
create-react-app my-app
cd my-app
npm start
复制代码

并且把src中其他文件都删除，留下index.js就可以接下来了

vnode 的构建

首先要确定我们vnode对象的属性; type:标签名，attrs:属性名，children:子元素

实例：

那么根据上面我们需要的vnode结果，我们去写创建vnode的函数 createElement(type, attrs, children)

src/index.js

import { createElement } from './element'
let virtualDom = createElement('ui', { class: 'li-group' }, [
  createElement('li', { class: 'item' }, ['a']),
  createElement('li', { class: 'item' }, ['b'])
])

复制代码

接下来我们开始具体去写createElement函数，我们先在src下新建一个element.js文件

createElement - src/element.js

src/elment.js

class Element {
  constructor(type, attrs, children) {
    this.type = type
    this.attrs = attrs
    this.children = children
  }
}

function createElement(type, attrs, children) {
  return new Element(type, attrs, children)
}

export { createElement }
复制代码

现在我们已经可以从上面打印出virtualDom的数据结构了，那么接下来就是将virtualDom通过render函数去构建成真实的dom

render - src/elment.js

render(virtualDom, target) target:添加的目标节点

src/index.js

import { render } from './element'
let el = render(virtualDom)
复制代码

src/element.js

function render(virtualDom){
  const { type, attrs, children } = virtualDom
  let el = document.createElement(type)

  // 挂载属性
  for(let key in attrs){
    setAttr(el, key, attrs[key])
  }
  // 创建子节点
  children.forEach(child=>{
    if(child instanceof Element){
      // 节点
      el.appendChild(render(child))
    }else{
      // 文本
      let textNode = document.createTextNode(child)
      el.appendChild(textNode)
    }
  })
  return el
}

function setAttr(node, key, value){
  switch(key){
    case 'value': // input textarea
      if(node.tagName.toUpperCase() === 'INPUT' || node.tagName.toUpperCase() === 'TEXTAREA'){
        node[key] = value
      } else{
        node.setAttribute(key, value)
      }
      break;
    case 'style':
      node.style.cssText = value
      break;
    default:
      node.setAttribute(key, value)
      break;
  }
}
复制代码

那么现在我们终于可以将Dom渲染到页面中了

renderDom - src/element.js

src/index.js

import { renderDom } from './element'
renderDom(el, document.getElementById('root'))
复制代码

src/element.js

function renderDom(el, target){
  target.appendChild(el)
}
复制代码

上半部分已经好了，我们还是动手完成一下成果把

github： github.com/XueMary/my-…

先整理一下剩下的内容

vnode已经完成了，那么接下来就还有数据变更后的 diff 算法 和 diff 算法计算出的变更内容 patch。 数据变更后会产生新的vnode， diff会对比两份 vnode 查到其中的变更，再将这些变更通过patch函数去修改真实dom

再来打破一下大多数人对虚拟dom的理解

网上很多人说虚拟动效率高，性能好。

开始分析了：

1、什么虚拟dom经过diff算法实现了dom的最小变化，局部刷新（这句话每错），但是和性能没关系，你手动去操作dom，看看控制台是不是也只有你改变的dom元素刷新了，手工操作本身就是最小变化，框架还要经过diff，那么框架为什么要diff，因为不diff，那他就得把整个页面出现渲染了。

2、另一种说法就更唬人点了。什么js线程和渲染线程是两个部门，跨部门交流当然耗性能，js去更新 虚拟dom是js和js间的沟通，搞的好像更新了虚拟dom树后不用去操作真实dom一样了。比手工操作还多了一遍操作

那么虚拟dom到底为什么存在。

回到框架本身，现在前端是数据驱动视图，是为了让使用者只关注数据本身，对dom的增删改查就都被隐藏在了框架中，框架本身也需要这么一份vnode的描述，来说明现在的node结构是怎么的，不然他也不知道哪里被改变了，也就无法帮我们去修改真实dom了

这才是维护一份虚拟dom的作用

下文：juejin.im/post/5cfa71…