DOM 操作从简单更新到虚拟 DOM-js教程-PHP中文网

DOM 操作从简单更新到虚拟 DOM

霞舞

发布： 2025-01-09 08:15:33

原创

894人浏览过

构建 web 应用时，有效更新 dom 以响应用户交互和状态变化是核心挑战。本文通过一个待办事项应用的三种不同实现，探讨了 dom 操作方法的演变。

DOM 操作从简单更新到虚拟 DOM

GitHub 代码：https://www.php.cn/link/745dc8d0c9e067bbcd1e6688a64cfcda

DOM 更新方法的演变

1. 直接 DOM 操作：简单但有限

初始实现直接操作 DOM。添加待办事项的简化代码如下：

function addTodo() {
  const todoText = input.value;
  const todoElement = document.createElement('div');
  todoElement.textContent = todoText;
  todoList.appendChild(todoElement);
}

登录后复制

这种方法简单易懂，但存在局限性：

直接操作 DOM，缺乏状态管理。
难以维护一致性，尤其在复杂应用中。
频繁更新效率低下。

2. 基于状态的 DOM 操作：结构化改进

第二种实现引入了状态管理：

const todoStore = new Map();

function addTodo(text) {
  const id = nextId++;
  todoStore.set(id, { text, completed: false });
  const todoElement = createTodoElement(text, id);
  todoList.appendChild(todoElement);
}

登录后复制

改进之处：

数据与表示分离，更清晰。
应用行为更可预测。
易于实现撤销/重做等功能。
代码组织更好。

然而，高效更新和状态与 UI 一致性仍然是挑战。

3. 虚拟 DOM 类似方法：智能更新

最终实现采用了一种简化的虚拟 DOM 类似机制，通过比较状态差异来优化更新：

let todoState = [];
let oldTodoState = [];

function updateState(newTodos) {
  const added = newTodos.filter(newTodo => !oldTodoState.some(oldTodo => oldTodo.id === newTodo.id));
  const deleted = oldTodoState.filter(oldTodo => !newTodos.some(newTodo => newTodo.id === oldTodo.id));
  const updated = // ... find updated items

  added.forEach(todo => addTodoElement(todo));
  deleted.forEach(todo => removeTodoElement(todo));
  updated.forEach(todo => updateTodoElement(todo));

  oldTodoState = [...newTodos];
}

登录后复制

协调与差异

React 等框架的核心概念是协调（reconciliation），即高效更新 DOM 以匹配目标状态。我们的简化实现展示了三个关键方面：