虚拟 DOM 如何变成真实 DOM

虚拟 DOM 变成 真实 DOM

现有一个虚拟 DOM，结构如下

    const obj = {
      type: "div",
      attr: {
        id: "001",
        class: "class1",
      },
      children: [
        {
          type: "h1",
          attr: {
            id: "002",
            class: "class2",
          },
          children: "我是标题1",
        },
        {
          type: "p",
          attr: {
            id: "003",
            class: "class3",
          },
          children: [
            {
              type: "p",
              attr: {
                id: "0031",
                class: "class31",
              },
              children: [
                {
                  type: "span",
                  attr: {
                    id: "00311",
                    class: "class311",
                  },
                  children: "我是",
                },
                {
                  type: "span",
                  attr: {
                    id: "00312",
                    class: "class312",
                  },
                  children: "40万",
                },
              ],
            },
          ],
        },
        {
          type: "div",
          attr: {
            id: "004",
            class: "class4",
          },
          children: [
            {
              type: "span",
              attr: {
                id: "005",
                class: "class5",
              },
              children: "下大雨",
            },
          ],
        },
      ],
    };

我们使用递归的方法来处理

 const render = (obj) => {
      // 递归的终止条件是：遇到了文本节点，那么必然不可能还有孩子节点了
      if (typeof obj === "string") {
        return document.createTextNode(obj);
      } else {
        if (obj.type) {
          const dom = document.createElement(obj.type);
          if (obj.attr) {
            // 将 attr 对象中的属性取出来
            const arr = Object.entries(obj.attr);
            // 使用 setAttribute 为 dom 节点设置属性，Object.entries 方法十分方便
            for (let i = 0; i < arr.length; i++) {
              dom.setAttribute(arr[i][0], arr[i][1]);
            }
          }
          if (obj.children) {
            for (let i = 0; i < obj.children.length; i++) {
              // 回溯时拿到孩子
              const child = render(obj.children[i]);
              // 将孩子添加到 dom 上
              dom.appendChild(child);
            }
          }
          return dom;
        }
      }
    };

    console.log(render(obj));

打印如下：

这是用创建节点的方式来实现，也可以通过字符串拼接的方式得到结果，然后使用 innerHTML 渲染到页面上。