render&ts

render

众所周知，vue.js页面形成是由虚拟dom向真实dom渲染的，而渲染这个操作就是由render来完成的，也就是一个函数renderer(渲染器),依次今天我们就简单用ts实现一下渲染器！

实现

interface VNode {
  tag: string;
  props?: {};
  children?: (string | VNode)[];
  //   多个儿子，有string，也有VNODE
}

const renderer = (vNode: VNode, container: HTMLElement) => {
  const el = document.createElement(vNode.tag);
  for (const key in vNode.props) {
    // for in 遍历对象,获取的是键
    if (/^on/.test(key)) {
      // 判断是否以on开头，是则将on去掉并小写化，再绑定事件
      el.addEventListener(key.substring(2).toLowerCase(), vNode.props[key]);
    }
  }
  vNode.children?.forEach((item) => {
    if (typeof item === "string") {
      console.log(item);
      el.appendChild(document.createTextNode(item));
    } else {
      renderer(item, el);
      //递归的渲染子节点
    }
  });
  container.appendChild(el);
};

使用

let child1Vnode: VNode = {
  tag: "h4",
  children: ["child1"],
};

let child2Vnode: VNode = {
  tag: "h4",
  children: ["this is child2"],
};

const vNode: VNode = {
  tag: "h2",
  props: {
    onclick: () => {
      console.log("onClick");
    },
    onmouseenter: () => {
      console.log("onmouseenter");
    },
  },
  children: [child1Vnode, "text", child2Vnode],
};

renderer(vNode, document.getElementById("demo") as HTMLElement);

tsc编译为js文件，再导入到html页面，再html声明一个id为demo的div就可以看到一下结果:

总结

到这一个简单的renderer就完成了,实际上它很简单，就是解析模板，然后根据模板来渲染为真实dom，这种方式有利于更新页面时做更少的更新。

结语

本次的文章到这里就结束啦！♥♥♥读者大大们认为写的不错的话点个赞再走哦 ♥♥♥

每天一个知识点，每天都在进步！♥♥