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中文網其他相關文章！