从零开始，采用Vue的思想，开发一个自己的JS框架（二）：首次渲染

题外话

对我们程序猿/媛来说，仅代码方面，看再多不如自己敲一遍。所以我才打算写这一系列，也算是给自己的所学做一个总结吧，如果有哪里写的不好的地方，还请大家多多指正。本系列文章更新速度不会很快，因为我是代码写到哪里就更到哪里。平时和大家一样也都得上班，所以时间上来说也不会很多。目前预期更新进度大概一周一更或两更。

关于本章内容，其实本来是打算和下一章节diff的内容合在一起，但因为感觉篇幅可能会比较长，所以分为两部分。下一节内容大概在双休日的时候进行更新。

目标

按照惯例，我们先明确这一节的目标，我们的目标是要将生成的DOM插入容器div（#app）中。让我们先从目标触发，自底向上地完成这一过程。

1. 为了插入DOM，我们必须要有一个mount方法，其应该接受两个参数，第一个目标容器（#app），第二个为DOM树，类似如下：

mount('#app', domTree);

2. 那么这个domTree怎么来？它应该通过我们的Virtual DOM来生成。

domTree = createDOMTree(vnodeTree)

3. 同上的问题，vnodeTree应该由jsx解析后生成

vnodeTree = parse(jsx)

既然已经明确了目标，我们就开始逐步实现这一过程

从解析开始

之前我们的通过上一章节我们的解析函数对jsx进行解析。它返回给我们的是一个包含tag、attr、children的对象，我们首先就是对这个对象进行解析，这个过程应该是在调用beforeMount生命周期钩子之后。

xm._callHook.call(xm, 'beforeMount');
    
// 生成vnode，并缓存到实例上
xm.$vnodeTree = parseJsxObj(xm.$render());

那么parseJsxObj这个函数应该返回一个vnode，所以我们需要一个VNode类：

class VNode {
  constructor(tagMsg) {
    // 如果是JSXObj对象，则进行解析
    if(tagMsg instanceof JSXObj) {
      this.tag = tagMsg.tag;
      this.children = [];
      this.attrs = {};
      this.events = {};
      // 判断是否是原生标签
      // NativeTags是一个包含原生标签的数组，
      // 除此以外，我还在原型上扩展了一个方法，用于让用户自定义地去扩展NativeTags，其实就是调用NativeTags.push()而已
      if(NativeTags.includes(this.tag)) this.isNativeTag = true;
      // 如果不是，则进行组件化处理
      else {
        // 这里会对其是否为组件进行判断，这一块先暂时跳过
        this.isNativeTag = false;
      }
      // 对attrs进行处理，分离出属性和事件
      tagMsg.attrs && Object.entries(tagMsg.attrs).forEach(([key, value]) => {
        // 以on+大写字母开头的字符串为事件
        if(key.match(/on[A-Z][a-zA-Z]*/)) {
          const eventName = key.substring(2, 3).toLowerCase() + key.substring(3);
          this.events[eventName] = value;
        }
        // 否则，其为属性
        else this.attrs[key] = value;
      })
    }
    // 对null节点的处理
    // 对于条件渲染，对不显示的项，需要在jsx中返回null
    else if(tagMsg === null) {
      this.tag = null;
    }
    // 如果不是，则默认当做文本节点处理，文本节点的tag属性为空字符串
    else {
      this.tag = '';
      this.text = tagMsg;
    }

  }
  // 不在构造函数里对子节点进行处理，通过实例主动调用此方法添加子节点
  addChild(child) {
    this.children.push(child);
  }
  // 添加真实DOM属性，用来缓存真实DOM
  addElement(el) {
    this.el = el;
  }
}

既然已经有了VNode类，就可以完成parseJsxObj方法了

// 解析JSX，返回VNodeTree
// 参数jsxObj可能为对象（普通节点），也可能为字符串（文本节点），也可能为null
export const parseJsxObj = function(jsxObj) {
  const vnodeTree = new VNode(jsxObj);
  // 这里通过递归的方式将子节点插入至父节点中
  jsxObj && jsxObj.children && jsxObj.children.forEach(item => vnodeTree.addChild(parseJsxObj(item)));
  return vnodeTree;
}

到这里，我们就已经生成了我们的vnodeTree，接下来进入下一步。

生成DOM树

我们已经有了我们的vnodeTree，接下来就根据vnodeTree来生成DOM树，那么createDOMTree方法应该返回一个DOM对象或者存有DOM的对象

// 第一个参数为Xue实例，传入的目的是为了在绑定事件的过程中，给事件方法绑定this，使this指向实例
const element = createDOMTree(xm, xm.$vnodeTree)

基于此，我们就需要一个Element类来进行DOM相关的操作，我们之后对DOM的操作都会通过这个类来实现

class Element {
  // 传入xm的作用同上
  constructor(vnode, xm) {
    this.xm = xm;
    // 如果为null的话，则不做任何处理
    if(vnode.tag === null) return;
    // 非文本节点
    if(vnode.tag !== '') {
      this.el = document.createElement(vnode.tag);
      // 绑定属性
      Object.entries(vnode.attrs).forEach(([key, value]) => {
        this.addAttribute(key, value);
      });
      // 绑定事件
      Object.entries(vnode.events).forEach(([key, value]) => {
        this.addEventListener(key, value.bind(xm));
      });
    }
    // 文本节点
    else this.el = document.createTextNode(vnode.text);

  }
  // 不在构造函数里对子节点进行处理，通过外部主动调用此方法添加子节点
  appendChild(element) {
    this.el.appendChild(element.el);
  }
  // 添加属性，对className和style做特殊处理
  // class是保留字，style接受一个对象
  addAttribute(name, value) {
    if(name === 'className') {
      this.el.setAttribute('class', value);
    }
    else if(name === 'style') {
      Object.entries(value).forEach(([styleKey, styleValue]) => {
        this.el.style[styleKey] = styleValue;
      })
    }
    else {
      this.el.setAttribute(name, value);
    }
  }
  // 添加事件监听
  addEventListener(name, handler) {
    this.el.addEventListener(name, handler);
  }
  // 移除事件监听
  removeEventListener(name, handler) {
    this.el.removeEventListener(name, handler);
  }
}

生成Element的思路基本上和生成VNode的思路是一样的，看看update方法的实现：

// 这里涉及到了更新操作，对于首次渲染而言，它其实只接受一个参数，逻辑上和上面生成VNode的思路是一样的
export const createDOMTree = function(xm, vnodeTree) {
  const elementTree = new Element(vnodeTree, xm);
  // 递归调用添加子节点
  vnodeTree.children.forEach(item => elementTree.appendChild(createDOMTree(xm, item)));
  // 把当前的DOM对象缓存到VNode中，可以在diff的过程中，找到差异后直接对DOM进行修改
  vnodeTree.addElement(elementTree);
  return elementTree;
}

到这里，我们的DOM也有了，接下来就是实现mount方法，将DOM挂载至我们的页面当中

// 这里我把_mount方法挂到了原型上
Xue.prototype._mount = function(dom) {
  const root = this.$options.root;
  // 如果是字符串，此时对应的就是我们的根节点
  if(typeof root === 'string') this.$el = document.querySelector(root);
  // 这里对应的是组件化部分的逻辑
  else if(root instanceof HTMLElement) this.$el = root;
  this.$el.appendChild(dom);
}

本章总结

最后，在我们的init函数中，我们这次新增的内容其实就是这部分：

xm._callHook.call(xm, 'beforeMount');

// 生成vnode
xm.$vnodeTree = parseJsxObj(xm.$render());

// 生成并挂载DOM
xm._mount.call(xm, createDOMTree(xm, xm.$vnodeTree).el);

xm._callHook.call(xm, 'mounted');

到这里为止，本章的内容其实已经结束了，也成功完成了组件的初次挂载。接下来，我们需要完成组件更新，以下内容为对下一章节update的预告，即为update做一些准备工作。

对update做一些准备工作

首先，update方法是和Wacther直接相关的，所以先完善一下我们之前的Watcher类

// Watcher类
let id = 0;
class Watcher {
  // cb为watcher执行后的回调，type表示watcher的类型：render或者user
  // 先只考虑render的部分，user之后再实现
  constructor(cb, type) {
    this.id = id++;
    this.deps = [];
    this.type = type;
    this.cb = cb;
  }
  addDep(dep) {
    const depIds = this.deps.map(item => item.id);
    if(dep && !depIds.includes(dep.id)) this.deps.push(dep);
  }
  run() {
    this.cb();
  }
}

然后我们再init中，修改一下new Watcher的过程中传入的参数

// init函数中传入的参数
new Watcher(() => {
  // 调用beforeUpdate钩子
  xm._callHook.call(xm, 'beforeUpdate');
  // 生成新的vnode
  const newVnodeTree = parseJsxObj(xm.$render());
  // 更新后返回一个新的vnode
  // 这里需要传入xm，为的是在更新后，this还是指向Xue实例，主要应用在事件的处理函数上
  xm.$vnodeTree = update(xm, newVnodeTree, xm.$vnodeTree);
}, 'render');

Watcher的部分更新完了，接下来就是执行Watcher的部分，上一章节我们在派发更新的时候，用queue对Watcher数组进行保存，但是我们在触发更新的时候，是同步处理的，这样会造成我们每次更新依赖项，都会重新跑一遍render和diff的过程，这是十分浪费性能的，所以我们要将其改为异步。其实就是一个nextTick的过程，所以就要先对nextTick进行封装：

// 返回一个结果为resolve的Promise
function nextTick() {
  // 为什么不用setTimeOut，如果使用setTimeOut，因为setTimeOut是宏任务，我们的更新过程则会被其他微任务所阻塞，这是十分影响性能的
  // 对于更新而言，其应该在主线程执行完之后立即执行，而不应该被阻塞
  return Promise.resolve();
}
export default nextTick;

有了我们的nextTick，那么就需要重新改一下queue相关的代码了：

let queue = [];
let waiting = false;
export const addUpdateQueue = function(watchers) {
  const queueSet = new Set([...queue, ...watchers]);
  queue = [...queueSet];
  // 排序是为了保证父组件的watcher先与子组件生成
  // 当然组件部分还没完成，所以这里可以忽略
  queue.sort((a, b) => a.id - b.id);
  // 使用waiting变量控制，使得遍历Watcher的过程只执行一次
  if(!waiting) {
    waiting = true;
    nextTick().then(() => {
      // 这里需要动态获取queue.length，因为在遍历queue执行Watcher的过程中，可能会发生其他依赖项的变化
      // 这里还未对这种情况进行处理，此类情况会在之后的章节补充说明
      for(let i = 0; i < queue.length; i++) {
        // 执行Watcher的回调
        queue[i].run();
        // 遍历完成后，重置waiting
        if(i === queue.length - 1) waiting = false;
      }
    });
  }
}

至此，本章内容就全部结束了，下一章节会对update的过程做详细地说明。敬请期待......

github地址：点此跳转

第一章：从零开始，采用Vue的思想，开发一个自己的JS框架（一）：基本架构

第三章：从零开始，采用Vue的思想，开发一个自己的JS框架（一）：update和diff

第四章：从零开始，采用Vue的思想，开发一个自己的JS框架（四）：组件化和路由组件