带你手写vnode到renderDom-白红宇

前言

本文分为

vnode树的构建

render 的渲染

数据变更后的diff

拿到变更后的patch

项目搭建

npm i -g create-react-appcreate-react-app my-appcd my-appnpm start复制代码

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

vnode 的构建

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

实例：

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

src/index.jsimport { 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.jsclass 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.jsimport { render } from './element'let el = render(virtualDom)复制代码

src/element.jsfunction 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.jsimport { renderDom } from './element'renderDom(el, document.getElementById('root'))复制代码

src/element.jsfunction renderDom(el, target){  target.appendChild(el)}复制代码

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

github：

先整理一下剩下的内容

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的作用

前言