渲染器与响应式系统的结合

本节，我们暂时将渲染器限定在 DOM 平台。既然渲染器用来渲染真实 DOM 元素，那么严格来说，下面的函数就是一个合格的渲染器:

// 渲染器：
function renderer(domString, container) {container.innerHTML = domString
}

使用渲染器：

renderer('<h1>Hello</h1>', document.getElementById('app'))

如果页面中存在 id 为 app 的 DOM 元素，那么上面的代码就会将

hello

插入到该 DOM 元素内。

当然，我们不仅可以渲染静态的字符串，还可以渲染动态拼接的 HTML 内容，如下所示:

let count = 1
renderer(`<h1>${count}</h1>`, document.getElementById('app'))

这样，最终渲染出来的内容将会是

1

。注意上面这段代码中的变量 count，如果它是一个响应式数据，会怎么样呢?这让我们联想到副作用函数和响应式数据。 利用响应系统，我们可以让整个渲染过程自动化:

const count = ref(1)effect(() => {renderer(`<h1>${count.value}</h1>`,document.getElementById('app'))})count.value++

在这段代码中，我们首先定义了一个响应式数据 count，它是一个 ref，然后在副作用函数内调用 renderer 函数执行渲染。副作用函数执行完毕后，会与响应式数据建立响应联系。当我们修改 count.value 的值时，副作用函数会重新执行，完成重新渲染。所以上面的代码运行完毕后，最终渲染到页面的内容是 <h1>2</h1>。

这就是响应系统和渲染器之间的关系。我们利用响应系统的能力，自动调用渲染器完成页面的渲染和更新。这个过程与渲染器的具体实现无关，在上面给出的渲染器的实现中，仅仅设置了元素的 innerHTML 内容。

渲染器的每本概念

renderer：渲染器
render：渲染
渲染器的作用是把虚拟 DOM 渲染为特定平台上的真实元素。在浏览器平台上，渲染器会把虚拟 DOM 渲染为真实 DOM 元素。

渲染器把虚拟 DOM 节点渲染为真实 DOM 节点的过程叫作挂载（mount）。
Vue.js 组件中的 mounted 钩子就会在挂载完成时触发。这就意味着，在 mounted 钩子中可以访问真实DOM 元素。

那么，渲染器把真实 DOM 挂载到哪里呢?其实渲染器并不知道应该把真实 DOM 挂载到哪里因此，渲染器通常需要接收一个挂载点作为参数，用来指定具体的挂载位置。这里的“挂载点”其实就是一个DOM 元素，渲染器会把该 DOM 元素作为容器元素，并把内容渲染到其中。我们通常用英文 container 来表达容器。


// createRenderer：创建渲染器
function createRenderer() {// render：渲染函数// vnode：真实dom// container：具体的挂载位置function render(vnode, container) {}return render
}

有了渲染器，我们就可以用它来执行渲染任务了，如下面的代码所示:


// createRenderer 函数创建 一个渲染器
const renderer = createRenderer()// 首次渲染
// renderer.render 函数执行渲染
renderer.render(vnode, document.querySelector('#app'))

渲染器除了要执行挂载动作外，还要执行更新动作。例如：

const renderer = createRenderer()// 首次渲染
renderer.render(oldVNode, document.querySelector('#app'))// 第二次渲染
renderer.render(newVNode, document.querySelector('#app'))

如上面的代码所示，由于首次渲染时已经把 oldVNode 渲染到 container 内了，所以当再次调用 renderer.render 函数并尝试渲染 newVNode 时，就不能简单地执行挂载动作了。在这种情况下，渲染器会使用 newVNode 与上一次渲染的 oldVNode 进行比较，试图找到并更新变更点。这个过程叫作“打补丁”(或更新)，英文通常用patch来表达。但实际上，挂载动作本身也可以看作一种特殊的打补丁，它的特殊之处在于旧的 vnode 是不存在的。所以我们不必过于纠结“挂载”和“打补丁”这两个概念 。代码示例如下:

function createRenderer() {function render(vnode, container) {if (vnode) {// 新 vnode 存在，将其与旧 vnode 一起传递给 patch 函数，进行打补patch(container._vnode, vnode, container)} else {// 旧 vnode 存在，且新 vnode 不存在，说明是卸载(unmount)操作if (container._vnode) {unmount(container._vnode)}}// 把 vnode 存储到 container._vnode 下，即后续渲染中的旧 vnodecontainer._vnode = vnode}
}

上面这段代码给出了 render 函数的基本实现.我们可以配合下面的代码分析其执行流程，从而更好地理解 render 函数的实现思路。假设我们连续三次调用 renderer.render 函数来执行渲染:

const renderer = createRenderer()// 首次渲染
renderer.render(vnode1, document.querySelector('#app'))// 第二次渲染
renderer.render(vnode2, document.querySelector('#app'))
// 第三次渲染
renderer.render(null, document.querySelector('#app'))

在首次渲染时，渲染器会将 vnode1 渲染为真实 DOM。渲染完成后，vnode1 会存储到容器元素的 container._vnode 属性中，它会在后续渲染中作为旧 vnode 使用。
在第二次渲染时，旧 vnode 存在，此时渲染器会把 vnode2 作为新 vnode，并将新旧 vnode 一同传递给 patch 函数进行打补丁。
在第三次渲染时，新 vnode 的值为 null，即什么都不渲染。但此时容器中渲染的是 vnode2 所描述的内容，所以渲染器需要清空容器。从上面的代码中可以看出，我们使用unmount 卸载节点。

另外，在上面给出的代码中，我们注意到 patch 函数的签名，如下:

patch(container._vnode, vnode, container)

patch 函数是整个渲染器的核心入口，它承载了最重要的渲染逻辑，我们会花费大量篇幅来详细讲解它，但这里仍有必要对它做一些初步的解释。
patch 函数至少接收三个参数:

第一个参数 n1:旧 vnode
第二个参数 n2:新 vnode。
第三个参数 container:容器。

function patch(n1, n2, container) {}

在首次渲染时，容器元素的 container._vnode 属性是不存在的，即 undefined。这意味着，在首次渲染时传递给 patch 函数的第一个参数 n1 也是 undefined。这时，patch 函数会执行挂载动作，它会忽略 n1，并直接将 n2 所描述的内容渲染到容器中。从这一点可以看出，patch 函数不仅可以用来完成打补丁，也可以用来执行挂载。

自定义渲染器

渲染器不仅能够把虚拟 DOM 渲染为浏览器平台上的真实 DOM。通过将渲染器设计为可配置的“通用”渲染器，即可实现渲染到任意目标平台上。本节我们将以浏览器作为渲染的目标平台，编写一个渲染器，在这个过程中，看看哪些内容是可以抽象的，然后通过抽象，将浏览器特定的 API 抽离，这样就可以使得渲染器的核心不依赖于浏览器。在此基础上，我们再为那些被抽离的 API提供可配置的接口，即可实现渲染器的跨平台能力。

案例：
对于这样一个 vnode，我们可以使用 render 函数渲染它，如下面的代码所示:

const vnode = {type: 'h1',children: 'hello'
}
// 创建一个渲染器
const renderer = createRenderer()// 调用 render 函数渲染该 vnode
renderer.render(vnode, document.querySelector('#app'))

为了完成渲染工作，我们需要补充 patch 函数:

function patch(n1, n2, container) {// 如果 n1 不存在，意味着挂载，则调用 mountElement 函数完成挂载if(!n1) {mountElement(n2, container)} else {// n1 存在，意味着打补丁，暂时省略}
}

在上面这段代码中，第一个参数 n1 代表旧 vnode，第二个参数 n2 代表新 vnode。当 n1 不存在时，意味着没有旧 vnode，此时只需要执行挂载即可。这里我们调用 mountElement 完成挂载，它的实现如下:

function mountElement(vnode, container) {// 创建dom元素const el = document.createElement(vnode.type)// 处理子节点，如果子节点是字符串，代表元素具有文本节点if (typeof vnode.children === 'string') {// 因此只需要设置元素的 textContent 属性即可el.textContent = vnode.children}// 将元素添加到容器中container.appendChild(el)
}

挂载一个普通标签元素的工作已经完成。接下来，我们分析这段代码存在的问题。我们的目标是设计一个不依赖于浏览器平台的通用渲染器，但很明显，mountElement 函数内调用了大量依赖于浏览器的 API，例如 document.createElement、el.textContent 以及 appendChild 等。想要设计通用渲染器，第一步要做的就是将这些浏览器特有的 API 抽离。怎么做呢?我们可以将这些操作 DOM 的 API 作为配置项，该配置项可以作为 createRenderer 函数的参数，如下面的代码所示:


// 在创建 renderer 时传入配置项
const renderer = createRenderer({// 用于创建元素createElement(tag) {return document.createElement(tag)},// 用于设置元素的文本节点setElementText(el.taxt) {el.textContent = text},// 用于在给定的 parent 下添加指定元素insert(el, parent, anchor = null) {parent.insertBefore(el, anchor)}
})

可以看到，我们把用于操作 DOM 的 API 封装为一个对象，并把它传递给createRenderer 函数。这样，在 mountElement 等函数内就可以通过配置项来取得操作 DOM 的 API 了:

 function createRenderer(options) {// 通过 options 得到操作 DOM 的 APIconst { createElement, setElementText, insert } = optionsfunction mountElement(vnode, container) {}function patch(v1, v2, container) {}function render(vnode, container) {}return {render}}

接着，我们就可以使用从配置项中取得的 API 重新实现 mountElement 函数:

function mountElement(vnode, container) {// 调用 createElement 函数创建元素const el = createElement(vnode.type)// 处理子节点，如果子节点是字符串，代表元素具有文本节点if (typeof vnode.children === 'string') {// 调用 setElementText 设置元素的文本节点setElementText(el, vnode.children)}// 调用 insert 函数将元素插入到容器内insert(el, container)
}

如上面的代码所示，重构后的 mountElement 函数在功能上没有任何变化。不同的是，它不再直接依赖于浏览器的特有 API 了。这意味着，只要传入不同的配置项，就能够完成非浏览器环境下的渲染工作。为了展示这一点，我们可以实现一个用来打印渲染器操作流程的自定义渲染器，如下面的代码所示:

// 在创建 renderer 时传入配置项
const renderer = createRenderer({// 用于创建元素createElement(tag) {console.log(`创建元素 ${tag}`)return document.createElement(tag)},// 用于设置元素的文本节点setElementText(el.taxt) {console.log(`设置${JSON.stringify(el)}的文本内容：${text}`)el.textContent = text},// 用于在给定的 parent 下添加指定元素insert(el, parent, anchor = null) {console.log(`将${JSON.stringify(el)}添加到：${JSON.stringify(parent)}`)parent.children = el}
})

这样，我们就实现了一个自定义渲染器，可以用下面这段代码来检测它的能力:

const vnode = {type: 'h1',children: 'hello'
}const container = { type: 'root' }
renderer.render(vnode, container)

在浏览器中的运行结果如下：
请添加图片描述

现在，我们对自定义渲染器有了更深刻的认识了。自定义渲染器并不是“黑魔法”，它只是通过抽象的手段，让核心代码不再依赖平台特有的 API，再通过支持个性化配置的能力来实现跨平台。

完整代码如下：

// 调用createRenderer函数，创建渲染器
const renderer = createRenderer({createElement(tag) {console.log(`创建元素 ${tag}`)return document.createElement(tag)},setElementText(el, text) {console.log(`设置${JSON.stringify(el)}的文本内容：${text}`)el.textContent = text},insert(el, parent, anchor = null) {console.log(`将${JSON.stringify(el)}添加到：${JSON.stringify(parent)}`)parent.insertBefore(el, anchor)}
})// 渲染器函数
function createRenderer(options) {const { createElement, setElementText, insert } = options// 挂载元素function mountElement(vnode, container) {// 创建元素const el = createElement(vnode.type)// 处理子节点，如果子节点是字符串，只需要设置textContent的值即可if (typeof vnode.children === 'string') {setElementText(el, vnode.children)}// 将元素插入到容器中insert(el, container)}// 更新（打补丁）// n1:旧 vnode// n2:新 vnode// container:容器function patch(n1, n2, container) {// 如果 n1 不存在，意味着挂载，则调用 mountElement 函数完成挂载if (!n1) {mountElement(n2, container)} else {// n1 存在，意味着打补丁，暂时省略}}// 渲染function render(vnode, container) { if (vnode) {patch(container._vnode, vnode, container)} else {if (container._vnode) {container.innerHTML = ''}}container._vnode = vnode}return {render}
}// 测试
const vnode = {type: 'h1',children: 'hello'
}
renderer.render(vnode, document.getElementById('app'))