在本章之前，我们花费了很大的篇幅全面的讲解了一个普通渲染器的实现原理，它可以将 Virtual DOM 渲染为 Web 平台的真实 DOM。本章我们将在上一章的基础上讲解更加高级的渲染器：自定义渲染器(Custom renderer)以及异步渲染。

# 自定义渲染器的原理

渲染器是围绕 Virtual DOM 而存在的，在 Web 平台下它能够把 Virtual DOM 渲染为浏览器中的真实 DOM 对象，通过前面几章的讲解，相信你已经能够认识到渲染器的实现原理，为了能够将 Virtual DOM 渲染为真实 DOM，渲染器内部需要调用浏览器提供的 DOM 编程接口，下面罗列了在出上一章中我们曾经使用到的那些浏览器为我们提供的 DOM 编程接口：

document.createElement / createElementNS：创建标签元素。
document.createTextNode：创建文本元素。
el.nodeValue：修改文本元素的内容。
el.removeChild：移除 DOM 元素。
el.insertBefore：插入 DOM 元素。
el.appendChild：追加 DOM 元素。
el.parentNode：获取父元素。
el.nextSibling：获取下一个兄弟元素。
document.querySelector：挂载 Portal 类型的 VNode 时，用它查找挂载点。

这些 DOM 编程接口完成了 Web 平台(或者说浏览器)下对 DOM 的增加、删除、查找的工作，它是 Web 平台独有的，所以如果渲染器自身强依赖于这些方法(函数)，那么这个渲染器也只能够运行在浏览器中，它不具备跨平台的能力。换句话说，如果想要实现一个平台无关的渲染器，那么渲染器自身必须不能强依赖于任何一个平台下特有的接口，而是应该提供一个抽象层，将 “DOM” 的增加、删除、查找等操作使用抽象接口实现，具体到某个平台下时，由开发者决定如何使用该平台下的接口实现这个抽象层，这就是自定义渲染器的本质。

TIP

在下文中，我们将使用 “元素” 一词指代所有平台中的元素对象，例如在 Web 平台下 “元素” 一词指的就是 DOM 元素。

渲染器除了负责对元素的增加、删除、查找之外，它还负责修改某个特定元素自身的属性/特性，例如 Web 平台中元素具有 id、href 等属性/特性。在上一章中，我们使用 patchData 函数来完成元素自身属性/特性的更新，如下代码用于修改一个元素的类名列表(class)：

// patchData.js
case 'class':
  el.className = nextValue
  break

@前端进阶之旅: 代码已经复制到剪贴板

这段代码同样也只能运行在浏览器中，为了渲染器能够跨平台，那么修改一个元素自身的属性/特性的工作也应该作为可自定义的一部分才行，因此，一个跨平台的渲染器应该至少包含两个可自定义的部分：可自定义元素的增加、删除、查找等操作、可自定义元素自身属性/特性的修改操作。这样对于任何一个元素来说，它的增删改查都已经变成了可自定义的部分，我们只需要“告知”渲染器在对元素进行增删改查时应该做哪些具体的操作即可。

接下来我们就着手将一个普通渲染器修改为拥有自定义能力的渲染器，在之前的讲解中，我们将渲染器的代码存放在了 render.js 文件中，如下是整个 render.js 文件的核心代码：

// 导出渲染器
export default function render(vnode, container) { /* ... */ }

// ========== 挂载 ==========

function mount(vnode, container, isSVG, refNode) { /* ... */ }

function mountElement(vnode, container, isSVG, refNode) { /* ... */ }

function mountText(vnode, container) { /* ... */ }

function mountFragment(vnode, container, isSVG) { /* ... */ }

function mountPortal(vnode, container) { /* ... */ }

function mountComponent(vnode, container, isSVG) { /* ... */ }

function mountStatefulComponent(vnode, container, isSVG) { /* ... */ }

function mountFunctionalComponent(vnode, container, isSVG) { /* ... */ }

// ========== patch ==========

function patch(prevVNode, nextVNode, container) { /* ... */ }

function replaceVNode(prevVNode, nextVNode, container) { /* ... */ }

function patchElement(prevVNode, nextVNode, container) { /* ... */ }

function patchChildren(
  prevChildFlags,
  nextChildFlags,
  prevChildren,
  nextChildren,
  container
) { /* ... */ }

function patchText(prevVNode, nextVNode) { /* ... */ }

function patchFragment(prevVNode, nextVNode, container) { /* ... */ }

function patchPortal(prevVNode, nextVNode) { /* ... */ }

function patchComponent(prevVNode, nextVNode, container) { /* ... */ }

// https://en.wikipedia.org/wiki/Longest_increasing_subsequence
function lis(arr) { /* ... */ }

@前端进阶之旅: 代码已经复制到剪贴板

观察如上代码结构，可以发现一个渲染器由两部分组成：mount 和 patch。在 mount 和 patch 中都会调用浏览器提供的 DOM 编程接口来完成真正的渲染工作。为了将浏览器提供的 DOM 编程接口与渲染器的代码分离，我们可以将如上代码封装到一个叫做 createRenderer 的函数中，如下代码所示：

export default function createRenderer(options) {
  function render(vnode, container) { /* ... */ }

  // ========== 挂载 ==========

  function mount(vnode, container, isSVG, refNode) { /* ... */ }

  function mountElement(vnode, container, isSVG, refNode) { /* ... */ }

  function mountText(vnode, container) { /* ... */ }

  function mountFragment(vnode, container, isSVG) { /* ... */ }

  function mountPortal(vnode, container) { /* ... */ }

  function mountComponent(vnode, container, isSVG) { /* ... */ }

  function mountStatefulComponent(vnode, container, isSVG) { /* ... */ }

  function mountFunctionalComponent(vnode, container, isSVG) { /* ... */ }

  // ========== patch ==========

  function patch(prevVNode, nextVNode, container) { /* ... */ }

  function replaceVNode(prevVNode, nextVNode, container) { /* ... */ }

  function patchElement(prevVNode, nextVNode, container) { /* ... */ }

  function patchChildren(
    prevChildFlags,
    nextChildFlags,
    prevChildren,
    nextChildren,
    container
  ) { /* ... */ }

  function patchText(prevVNode, nextVNode) { /* ... */ }

  function patchFragment(prevVNode, nextVNode, container) { /* ... */ }

  function patchPortal(prevVNode, nextVNode) { /* ... */ }

  function patchComponent(prevVNode, nextVNode, container) { /* ... */ }

  return { render }
}

// https://en.wikipedia.org/wiki/Longest_increasing_subsequence
function lis(arr) { /* ... */ }

@前端进阶之旅: 代码已经复制到剪贴板

createRenderer 函数的返回值就是之前的 render 函数，也就是说调用 createRenderer 函数可以创建一个渲染器。createRenderer 函数接收一个参数 options，该参数的作用是为了允许外界有能力将操作元素的具体实现以选项的方式传递进来。

那么 options 参数中应该包含哪些选项呢？其实前面我们已经分析过了，只要是需要自定义的部分就应该作为选项传递进来，所以参数 options 中至少要包含两部分：一部分是元素的增加、删除、查找；另外一部分是元素的修改，即 patchData 函数。如下代码所示：

const { render } = createRenderer({
  // nodeOps 是一个对象，该对象包含了所有用于操作节点的方法
  nodeOps: {
    createElement() { /* ... */ },
    createText() { /* ... */ }
    // more...
  },
  patchData
})

@前端进阶之旅: 代码已经复制到剪贴板

基于此，在 createRenderer 函数内部我们就可以通过解构的方式从 options 参数中得到具体的方法：

如上代码所示，options.nodeOps 选项是一个对象，它包含了所有用于对元素进行增、删、查的操作，options.patchData 选项是一个函数，用于处理某个特定元素上的属性/特定，这些内容都是在创建渲染器时由外界来决定的。

接下来我们要做的就是将渲染器中原本使用了 Web 平台进行 DOM 操作的地方修改成使用通过解构得到的函数进行替代，例如在创建 DOM 元素时，原来的实现如下：

# 自定义渲染器的原理

# 自定义渲染器的应用

Vue自定义渲染器和异步渲染|原理篇

Vue自定义渲染器和异步渲染|原理篇