渲染篇(一)：从零实现一个“微型React”：Virtual DOM的真面目

引子：前端性能的“永恒之问”

在前面两章中，我们已经奠定了坚实的架构基础。我们用“任务调度器”建立了声明式和模块化的编程范式，并通过对比MVC等模式论证了“组件化”是现代前端的唯一答案。我们的应用现在拥有了清晰、可组合的“逻辑组件”。

但它依然是“看不见”的。

现在，我们要开始搭建连接“逻辑世界”与“视觉世界”的桥梁。而这座桥梁的基石，就是我们要面对的前端性能优化领域一个几乎“永恒”的问题：

如何高效地更新用户界面（UI）？

想象一下，你的应用状态发生了改变——比如，用户数据更新了，一个列表项被删除了，或者一个计数器增加了。你需要将这些变化反映到屏幕上。最直观、最暴力的方式是什么？

很简单：清空整个页面，然后根据新的状态重新渲染所有内容。

// 暴力更新法
function renderApp(state) {const appContainer = document.getElementById('app');// 简单粗暴地清空appContainer.innerHTML = ''; // 根据新状态，重新创建所有DOMconst header = document.createElement('h1');header.textContent = state.title;const list = document.createElement('ul');state.items.forEach(itemText => {const listItem = document.createElement('li');listItem.textContent = itemText;list.appendChild(listItem);});appContainer.appendChild(header);appContainer.appendChild(list);
}

这种方法在状态简单、UI规模小的时候或许可行。但对于今天复杂的单页应用（SPA）来说，它是一场灾难。因为直接操作真实DOM（Document Object Model）的开销是极其昂贵的。

每一次你对DOM进行增、删、改，都可能引发浏览器的重排（Reflow）和重绘（Repaint）。

• 重排：当DOM的几何属性（如宽度、高度、位置）发生变化时，浏览器需要重新计算所有受影响元素的几何信息，这个过程非常耗费计算资源。
• 重绘：当元素的视觉属性（如颜色、背景）发生变化，但几何属性不变时，浏览器会重新绘制元素。开销比重排小，但依然不可忽视。

频繁地、大规模地操作DOM，就像是在一个精密的沙盘上，每次只改动一粒沙子，你却选择把整个沙盘推倒重来。这必然导致页面卡顿、掉帧，用户体验直线下降。

那么，问题变成了：我们能否找到一种方法，只更新“真正改变”了的那部分DOM？

答案是肯定的，但这需要进行一次“新旧对比”。我们需要知道更新前的UI长什么样，更新后的UI又长什么样，然后找出它们之间的差异，只把这些差异应用到真实DOM上。

这就是Diff（差异比对）算法的用武之地。然而，直接在真实DOM树上进行Diff操作，复杂度极高，因为DOM提供了太多无关的API和属性，遍历和比较的成本依然很大。

前端先驱们想出了一个绝妙的主意：我们为什么不先在“成本更低”的地方完成比对呢？

这个“成本更低”的地方，就是JavaScript的世界。于是，Virtual DOM (虚拟DOM) 应运而生。

---

第一幕：Virtual DOM的本质 - 用JS对象模拟DOM

Virtual DOM（简称VDOM）这个概念听起来很高级，但它的本质思想却异常朴素：

Virtual DOM 是真实DOM结构在JavaScript内存中的一种轻量级描述。

它不是什么魔法，它就是一个普普通通的JavaScript对象（Plain Old JavaScript Object, POJO）。这个对象通过嵌套，形成一棵“虚拟节点树”，用以模拟真实DOM的树形结构。

让我们来定义一下一个“虚拟节点”（VNode）应该长什么样。一个DOM元素，最核心的属性是什么？

1. 标签名（Tag Name）：比如'div', 'p', 'ul'。
2. 属性（Attributes/Properties）：比如class, id, style，以及事件监听器如onclick。我们把它统称为props。
3. 子节点（Children）：它可以是其他虚拟节点组成的数组，也可以是纯文本。

基于此，我们可以设计出这样一个VNode结构：

// 一个VNode的结构示例
{type: 'div', // 标签名props: {     // 属性id: 'container',class: 'main-content',onclick: () => alert('clicked!')},children: [ // 子节点{type: 'h1',props: { class: 'title' },children: ['Hello, Virtual DOM!'] // 文本节点},{type: 'p',props: {},children: ['This is a paragraph.']}]
}

看，这就是一个VDOM节点。它就是一个JS对象，比真实的DOM节点（那个包含了成百上千个属性和方法的庞然大物）要轻量得多。在内存中创建、遍历、比较这些JS对象，速度飞快，几乎没有性能开销。

createElement: VDOM的“制造工厂”

为了方便地创建这种VNode对象，React定义了一个众所周知的函数：createElement（在Vue中，它通常被称为h函数）。我们现在就从零实现一个我们自己的createElement。

它的功能很简单：接收type, props, 和 children，然后返回一个符合我们定义的VNode结构的对象。

createElement.js

// CSDN @ 你的用户名
// 系列: 前端内功修炼：从零构建一个“看不见”的应用
//
// 文件: /src/v3/createElement.js
// 描述: 实现一个简单的createElement函数，用于创建虚拟DOM节点（VNode）。/*** 创建并返回一个虚拟DOM节点 (VNode)。** @param {string | Function} type - 节点的类型。*   - 如果是字符串，如 'div', 'p'，代表一个原生DOM标签。*   - （在后续章节中）如果是一个函数或类，代表一个组件。* @param {object | null} props - 节点的属性对象，如 { id: 'app', class: 'main' }。* @param {...(object | string)} children - 子节点。可以是其他VNode对象，也可以是字符串。* @returns {object} 一个VNode对象。*/
function createElement(type, props, ...children) {// 核心就是返回一个结构一致的JS对象return {type,props: props || {}, // 保证props不为null// children参数是一个数组，里面包含了所有子节点。// 我们需要对它进行一些处理：// 1. 数组扁平化：有时候children可能是个数组，比如 .map() 的结果 [[VNode1, VNode2]]// 2. 过滤掉null或boolean等无效节点，这些在条件渲染中很常见 (e.g., { condition && <p/> })// 3. 将文本子节点（string, number）也包装成VNode对象，以便统一处理。children: children.flat().filter(Boolean).map(child => {if (typeof child === 'object') {// 如果已经是VNode对象，直接返回return child;} else {// 如果是字符串或数字，创建一个特殊的“文本VNode”return createTextVNode(String(child));}})};
}/*** 创建一个文本类型的VNode。* 这是一种内部辅助函数，用于统一数据结构。* @param {string} text - 文本内容。* @returns {object} 一个文本VNode对象。*/
function createTextVNode(text) {return {type: 'TEXT_ELEMENT', // 特殊类型，用于标识文本节点props: {nodeValue: text // 文本内容存储在nodeValue中，与真实DOM的属性对应},children: [] // 文本节点没有子节点};
}// 导出函数
module.exports = { createElement };

这个createElement函数虽然简单，但非常关键。它做了几件重要的事情：

• 统一结构：确保所有VNode都有type, props, children这三个属性。
• 处理子节点：优雅地处理了map生成的嵌套数组（flat()）、条件渲染产生的null或false（filter(Boolean)），并将原始的字符串或数字子节点转换成了统一的文本VNode结构。

现在，我们可以像使用React一样，来“描述”我们的UI了：

app.js (使用createElement)

// CSDN @ 你的用户名
// 系列: 前端内功修炼：从零构建一个“看不见”的应用
//
// 文件: /src/v3/app.js
// 描述: 使用我们自己的createElement来描述一个UI结构。const { createElement } = require('./createElement');// 假设这是我们的应用状态
const state = {title: 'My Awesome App',items: ['Learn Virtual DOM', 'Implement Diff Algorithm', 'Build a Framework']
};/*** 一个“组件”函数，它接收state并返回一个VNode树。* 这就是React/Vue组件的核心工作：State in -> UI out.* @param {object} state - 应用状态* @returns {object} VNode*/
function App(state) {return createElement('div',{ id: 'app-container', class: 'theme-dark' },createElement('h1',{ style: 'color: skyblue;' },state.title),createElement('ul',{ class: 'item-list' },...state.items.map(item => createElement('li', { class: 'item' }, item))),createElement('footer',null, // props可以为null`Total items: ${state.items.length}`));
}// 生成我们的VDOM树
const virtualDom = App(state);// 打印出来看看它的真面目
console.log(JSON.stringify(virtualDom, null, 2));

运行node app.js，你会在控制台看到一个巨大的、结构清晰的JSON对象。这就是我们应用的“UI蓝图”，完全存在于JavaScript内存中。

{"type": "div","props": {"id": "app-container","class": "theme-dark"},"children": [{"type": "h1","props": {"style": "color: skyblue;"},"children": [{"type": "TEXT_ELEMENT","props": {"nodeValue": "My Awesome App"},"children": []}]},// ... 其他子节点]
}

我们成功地用轻量的JS对象，完整地描述了我们想要的UI。这是通往高效渲染的第一步，也是最重要的一步。

---

第二幕：render函数 - 将“虚拟”照进“现实”

有了“UI蓝图”（VDOM），下一步就是根据这张蓝图来建造“真实的房子”（DOM）。这个过程，我们需要一个render函数来完成。

render函数接收两个参数：一个VNode对象，和一个真实的DOM容器节点。它的工作就是递归地遍历VNode树，并将每个VNode都转换成对应的真实DOM节点，然后插入到容器中。

render.js

// CSDN @ 你的用户名
// 系列: 前端内功修炼：从零构建一个“看不见”的应用
//
// 文件: /src/v3/render.js
// 描述: 实现一个render函数，将VNode渲染成真实的DOM。/*** 将VNode渲染到指定的DOM容器中。* @param {object} vnode - 要渲染的虚拟DOM节点。* @param {HTMLElement} container - 真实DOM容器。*/
function render(vnode, container) {// 第一步：清空容器，这是最简单的实现方式// 在后续章节我们会用diff算法来替代它container.innerHTML = '';// 第二步：创建真实DOM并追加const dom = createDom(vnode);container.appendChild(dom);
}/*** 递归地将VNode转换成真实DOM。* @param {object} vnode - 虚拟DOM节点。* @returns {HTMLElement | Text} 真实DOM节点。*/
function createDom(vnode) {// 处理文本节点if (vnode.type === 'TEXT_ELEMENT') {return document.createTextNode(vnode.props.nodeValue);}// 处理普通元素节点const dom = document.createElement(vnode.type);// 将VNode的props应用到真实DOM上applyProps(dom, vnode.props);// 递归处理子节点if (vnode.children && vnode.children.length > 0) {vnode.children.forEach(childVNode => {// 递归调用，并将子DOM追加到父DOM上dom.appendChild(createDom(childVNode));});}return dom;
}/*** 将props应用到DOM元素上。* @param {HTMLElement} dom - 真实DOM元素。* @param {object} props - 属性对象。*/
function applyProps(dom, props) {Object.keys(props).forEach(key => {const value = props[key];// 处理事件监听，如 onClick -> onclickif (key.startsWith('on')) {const eventType = key.slice(2).toLowerCase();dom.addEventListener(eventType, value);}// 处理样式对象，如 { style: { color: 'red' } }else if (key === 'style' && typeof value === 'object') {Object.assign(dom.style, value);}// 处理classNameelse if (key === 'class') {dom.className = value;}// 处理其他HTML属性else {dom.setAttribute(key, value);}});
}// 在Node.js环境中，没有真实的document对象。
// 为了能让我们的代码在Node中“运行”并看到结果，
// 我们来模拟一个“渲染成字符串”的版本。
// 这在服务器端渲染（SSR）中非常有用。/*** [Node.js环境专用] 将VNode渲染成HTML字符串。* @param {object} vnode - 虚拟DOM节点。* @returns {string} HTML字符串。*/
function renderToString(vnode) {if (vnode.type === 'TEXT_ELEMENT') {return escapeHtml(vnode.props.nodeValue);}const { type, props, children } = vnode;const propsString = Object.keys(props).map(key => {// 忽略事件监听和复杂对象if (key.startsWith('on') || typeof props[key] === 'object') return '';if (key === 'class') return ` class="${props[key]}"`; // 处理classreturn ` ${key}="${props[key]}"`;}).join('');const childrenString = children.map(child => renderToString(child)).join('');return `<${type}${propsString}>${childrenString}</${type}>`;
}function escapeHtml(str) {return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}module.exports = { render, renderToString };

这里的render.js提供了两个版本的渲染器：

1. render(vnode, container)：这是用于浏览器环境的，它会创建真实的DOM元素。
2. renderToString(vnode)：这是我们为了在Node.js中看到结果而创建的。它不依赖document对象，而是将VDOM树直接转换成一个HTML字符串。这和React的服务器端渲染（SSR）中的ReactDOMServer.renderToString()原理完全一致。

现在，让我们把所有东西串联起来：

main.js (最终执行文件)

// CSDN @ 你的用户名
// 系列: 前端内功修炼：从零构建一个“看不见”的应用
//
// 文件: /src/v3/main.js
// 描述: 串联所有模块，将VDOM渲染成字符串并打印。const { createElement } = require('./createElement');
const { renderToString } = require('./render'); // 我们使用renderToString// 1. 定义应用状态
const state = {title: 'My Awesome App',items: ['Learn Virtual DOM', 'Implement Diff Algorithm', 'Build a Framework']
};// 2. 定义App“组件”
function App(state) {return createElement('div',{ id: 'app-container', class: 'theme-dark' },createElement('h1',{ style: 'color: skyblue;' },state.title),createElement('ul',{ class: 'item-list' },...state.items.map(item => createElement('li', { class: 'item', onClick: () => console.log(`${item} clicked!`) }, item))),createElement('footer',null,`Total items: ${state.items.length}`));
}// 3. 生成VDOM
console.log('--- Generating Virtual DOM ---');
const virtualDom = App(state);// 4. 将VDOM渲染成HTML字符串
console.log('\n--- Rendering to HTML String ---');
const htmlString = renderToString(virtualDom);// 5. 打印最终结果
console.log('\n--- Final HTML Output ---');
console.log(htmlString);/*最终输出：<div id="app-container" class="theme-dark"><h1 style="color: skyblue;">My Awesome App</h1><ul class="item-list"><li class="item">Learn Virtual DOM</li><li class="item">Implement Diff Algorithm</li><li class="item">Build a Framework</li></ul><footer>Total items: 3</footer></div>
*/

运行node main.js，你将得到一段格式完美的HTML字符串。我们成功地将一个用JS对象描述的UI蓝图，转化成了最终的产物。虽然我们没有在浏览器里看到它，但我们已经完成了从0到1的最关键一步。

第三章总结：我们搭建了怎样的桥梁？

在这一章，我们亲手揭开了Virtual DOM的神秘面纱。它不是黑魔法，而是一种优雅而务实的设计模式，其核心思想在于用计算成本低的JavaScript操作，来代替计算成本高的DOM操作。

我们完成了两件核心的事情：

1. 实现了createElement函数：它让我们能够用一种声明式、结构化的方式，在JavaScript中描述我们想要的UI。这是“描述”阶段。
2. 实现了render和renderToString函数：它能够读取VDOM这个“蓝图”，并将其转化为最终的产物（真实DOM或HTML字符串）。这是“执行”阶段。

这套“描述”->“执行”的流程，是所有现代前端框架的渲染核心。

核心要点：

1. 直接操作DOM性能开销巨大，是导致页面卡顿的主要原因之一。
2. Virtual DOM的本质是一个轻量级的JavaScript对象，用于模拟DOM树的结构。
3. 在内存中对Virtual DOM进行操作（未来将进行Diff比较）远比直接操作真实DOM要快。
4. createElement是创建VNode的工厂函数，它统一了UI的描述方式。
5. render函数是VDOM和真实DOM之间的“翻译官”，负责将虚拟结构具象化。

然而，我们目前的render函数还是“暴力”的——每次渲染都清空容器再全部重建。这并没有完全解决我们最初提出的性能问题。

这正是我们下一章要去征服的高地。在 《渲染篇(二)：解密Diff算法：如何用“最少的操作”更新UI》 中，我们将基于本章创建的VDOM体系，亲手实现一个核心的diff算法。我们将学习如何比对两棵VDOM树，找出最小化的“补丁”（Patches），并只将这些补丁应用到真实DOM上，从而实现真正意义上的“高效更新”。这将是整个系列中技术挑战最大，但也是回报最高的一章。敬请期待！