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

总长DR

介绍

构建 Web 应用程序时，开发人员面临的最基本挑战之一是有效更新文档对象模型 (DOM) 以响应用户交互和状态更改。让我们通过检查待办事项应用程序的三种不同实现来探索这个概念，每种实现都展示了不同的 DOM 操作方法。

Github：https://github.com/sreeharsha-rav/javascript_projects/blob/main/todo-app/README.md

DOM 更新的演变

1. 直接 DOM 操作：简单的方法

在我们的第一个实现中，我们使用了最直接的方法：每当发生更改时直接操作 DOM。这是我们如何处理添加新待办事项的简化版本：

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

这种方法很直观，对于简单的应用程序效果很好，但它有局限性：

• 每个操作都直接接触DOM
• 没有中心位置来跟踪应用程序的状态
• 很难在多个更新之间保持一致性
• 频繁更新可能会变得低效

2. 基于状态的 DOM 操作：添加结构

我们的第二个实现引入了状态管理的概念。我们没有直接操作 DOM，而是维护一个中心状态并根据该状态更新 DOM：

const todoStore = new Map();

function addTodo(text) {
    // Update state
    const id = nextId++;
    todoStore.set(id, {
        text,
        completed: false
    });

    // Update DOM
    const todoElement = createTodoElement(text, id);
    todoList.appendChild(todoElement);
}

这种方法带来了一些改进：

• 数据（状态）和表示（DOM）之间清晰分离
• 更可预测的应用程序行为
• 更容易实现撤消/重做等功能
• 更好的代码组织

但是，我们仍然面临挑战：确保 DOM 更新高效并保持状态和 UI 之间的一致性。

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

我们的最终实现引入了一个使用状态差异的简单的类似虚拟 DOM 的机制。这种方法代表了复杂性的重大飞跃：

let todoState = [];      // Current state
let oldTodoState = [];   // Previous state

function updateState(newTodos) {
    // Find what changed
    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

    // Update only what changed
    added.forEach(todo => addTodoElement(todo));
    deleted.forEach(todo => removeTodoElement(todo));
    updated.forEach(todo => updateTodoElement(todo));

    // Save current state for next comparison
    oldTodoState = [...newTodos];
}

了解协调和差异

Reconciliation 的概念，由 React 普及，是关于有效地更新 DOM 以匹配我们想要的状态。我们的简单实现展示了三个关键方面：

1. 状态比较

我们维护状态的两个版本：当前的和以前的。这使我们能够准确检测更新之间发生的变化。发现这些差异的过程称为“比较”。

2. 最少的更新

我们不会重建所有内容，而是只更新更改的内容：

• 新项目添加到 DOM
• 移除的项目将从 DOM 中删除
• 修改的项目已就地更新

3. 批处理

在计算完所有差异后，我们所有的 DOM 更新都会在一次传递中发生。这比发生变化时一次更新一项更有效。

智能 DOM 操作的好处

随着这些实施的进展，我们获得了几个优势：

1. 性能：通过仅更新更改的内容，我们最大限度地减少了昂贵的 DOM 操作。
2. 可预测性：通过单一事实来源（我们的状态），可以更轻松地理解和调试我们的应用程序。
3. 可扩展性：即使我们的应用程序不断增长，差异方法仍然有效。
4. 可维护性：清晰的关注点分离使我们的代码更易于理解和修改。

现实世界的影响

虽然我们的实现得到了简化，但它演示了 React 等现代前端框架背后的核心概念。 React 中实际的 Virtual DOM 实现更加复杂，处理：

• 复杂的嵌套结构
• 活动委托
• 组件生命周期
• 批量更新
• 跨浏览器兼容性

结论

我们的待办事项应用程序的演变展示了不同的 DOM 操作方法如何带来不同的权衡。虽然直接操作更容易理解和实现，但具有状态管理和智能更新的更加结构化的方法可以带来更可维护和可扩展的应用程序。

协调和比较的概念，即使是其简化形式，也证明了为什么像 React 这样的现代框架如此强大。它们自动处理这些复杂的更新，使开发人员能够专注于构建功能而不是优化 DOM 更新。

随着 Web 应用程序变得越来越复杂，理解这些基本概念变得越来越重要。无论您是使用框架还是从头开始构建某些东西，了解 DOM 更新如何以及为何以这种方式工作将使您成为更高效的开发人员。

以上是DOM 操作从简单更新到虚拟 DOM的详细内容。更多信息请关注PHP中文网其他相关文章！