深入理解Matt-Esch/virtual-dom中的VNode虚拟节点-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01003/article/details/148393813

深入理解Matt-Esch/virtual-dom中的VNode虚拟节点

virtual-dom A Virtual DOM and diffing algorithm 项目地址: https://gitcode.com/gh_mirrors/vi/virtual-dom

什么是VNode？

VNode（虚拟节点）是虚拟DOM技术中的核心概念，它是真实DOM节点的轻量级JavaScript表示。在Matt-Esch/virtual-dom项目中，VNode扮演着构建虚拟DOM树的基础单元角色。

与直接操作真实DOM相比，使用VNode有以下优势：

更轻量：避免直接操作DOM带来的性能开销
更灵活：可以在内存中快速创建和修改
更高效：通过差异比较算法最小化DOM操作

VNode的核心结构

VNode对象包含以下关键属性：

tagName（必选）：字符串类型，表示HTML标签名，如'div'、'span'等
properties（可选）：对象类型，包含节点的属性和特性
- 可以设置标准HTML属性、自定义数据属性等
- 支持特殊属性如样式、类名等
children（可选）：数组类型，包含子节点
- 可以是VNode、VText、Widget或Thunk等虚拟节点类型
- 构建DOM树结构的基础
key（可选）：字符串类型，唯一标识符
- 用于虚拟DOM差异比较时的节点识别
- 对列表渲染优化特别重要
namespace（可选）：字符串类型，指定命名空间URI
- 用于SVG、MathML等特殊命名空间的元素创建
- 底层使用createElementNS API

创建VNode的完整示例

// 引入必要模块
const { VNode, createElement } = require("virtual-dom");

// 定义Hook示例
class MyHook {
  hook(elem, key) {
    console.log(`元素${elem.id}已挂载，key为${key}`);
  }
}

// 构建VNode
const vnode = new VNode(
  "div",  // 标签名
  {
    attributes: { class: "container" },
    id: "main-container",
    style: { width: "300px", backgroundColor: "#f0f0f0" },
    customHook: new MyHook()  // 自定义Hook
  },
  [
    new VNode("h1", { attributes: { class: "title" } }, ["Hello World"]),
    new VNode("p", {}, ["这是一个虚拟DOM示例"])
  ],  // 子节点数组
  "unique-key-123",  // 唯一key
  "http://www.w3.org/1999/xhtml"  // 命名空间
);

// 转换为真实DOM并插入文档
const realDOM = createElement(vnode);
document.body.appendChild(realDOM);

Properties属性的特殊处理规则

1. 属性(attributes)处理

所有放在properties.attributes对象中的属性都会通过setAttribute方法设置到真实DOM上：

new VNode('div', { 
  attributes: { 
    'data-id': '123',
    'aria-label': '说明文字'
  }
})

2. 样式(style)处理

有两种设置样式的方式：

方式一：通过attributes设置（字符串形式）

new VNode('div', {
  attributes: {
    style: "width: 100px; color: red;"
  }
})

方式二：通过style属性设置（对象形式）

new VNode('div', {
  style: {
    width: "100px",
    color: "red"
  }
})

3. 类名(className)处理

设置类名也有两种等效方式：

// 方式一：使用className属性
new VNode('div', { className: "box active" })

// 方式二：使用attributes中的class
new VNode('div', { attributes: { class: "box active" } })

4. 自定义数据属性(data-*)

推荐使用dataset属性或attributes设置：

// 推荐方式一
new VNode('div', { 
  dataset: { 
    userId: "12345",
    role: "admin"
  }
})

// 推荐方式二
new VNode('div', {
  attributes: {
    "data-user-id": "12345",
    "data-role": "admin"
  }
})

5. 表单元素值处理

对于表单元素的值设置，有三种方式：

// 方式一：设置value属性（不会随表单重置而改变）
new VNode('input', { value: "初始值" })

// 方式二：设置defaultValue属性（会随表单重置）
new VNode('input', { defaultValue: "初始值" })

// 方式三：通过attributes设置
new VNode('input', { 
  attributes: { 
    value: "初始值" 
  } 
})

Hook机制深入

Hook是VNode中一个强大的特性，允许在DOM元素生命周期的特定时刻执行自定义逻辑。Hook对象必须包含hook方法：

class MyHook {
  constructor(message) {
    this.message = message;
  }
  
  hook(element, propertyName, previousValue) {
    console.log(this.message, element);
    // 可以在这里执行DOM操作或其他逻辑
  }
  
  // 可选的反向hook
  unhook(element, propertyName, nextValue) {
    // 清理逻辑
  }
}

// 使用Hook
new VNode('div', {
  myCustomHook: new MyHook("元素已创建")
})

Hook的常见应用场景包括：