vuejs 设计与实现 - 渲染器的设计-Toy模板网

这篇具有很好参考价值的文章主要介绍了vuejs 设计与实现 - 渲染器的设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

本节，我们暂时将渲染器限定在 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 下，即后续渲染中的旧 vnode
         container._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 的 API
  	const { createElement, setElementText, insert } = options
	function 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)

在浏览器中的运行结果如下：
vuejs 设计与实现 - 渲染器的设计,vue.js,前端,javascript

现在，我们对自定义渲染器有了更深刻的认识了。自定义渲染器并不是“黑魔法”，它只是通过抽象的手段，让核心代码不再依赖平台特有的 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'))