认识

2023年06月10日

柏拉文

越努力，越幸运

一、认识

---

render 渲染器 的作用就是把 虚拟DOM 对象渲染为真实 DOM 元素。 render 渲染器主要工作如下:

1. 创建元素: 调用原生 DOM API, 把 vnode.tag 作为标签名称来创建 DOM 元素

2. 为元素添加属性和事件: 遍历 vnode.props 对象, 如果 key 以 on 字符开头, 说明它是一个事件, 把字符 on 截取掉后再用 toLowerCase 函数将事件名称小写化，最终得到合法的事件名称，最后调用 addEventlistener 绑定事件处理函数。

3. 处理 children: 如果 children 是一个数组, 就递归调用 render 继续渲染, 注意, 此时我们要把刚创建的元素作为挂载点；如果 children 是字符串, 则使用 createTExtNode 函数创建一个文本节点, 并将其添加到新创建的元素内。

render 基本实现如下所示:

const render = (vnode, container) => {
    if (vnode == null) {
      if (container._vnode) {
        /**
         * @description: 新 vnode 不存在 且 旧 vnode 存在, 说明是 卸载 unmount 操作
         */
        container.innerHTML = '';
      }
    } else {
      /**
       * @description: 新 vnode 存在, 将其与旧 vnode 一起传递给 patch 函数
       */      
      patch(container._vnode, vnode, container);
    }

    container._vnode = vnode;
};

二、细节

---