仮想 DOM への単純な更新からの DOM 操作

TLDR

導入

Web アプリケーションを構築する場合、開発者が直面する最も基本的な課題の 1 つは、ユーザーの操作や状態の変化に応じてドキュメント オブジェクト モデル (DOM) を効率的に更新することです。 todo アプリケーションの 3 つの異なる実装を調べて、この概念を探ってみましょう。それぞれが DOM 操作に対する異なるアプローチを示しています。

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

DOM アップデートの進化

1. DOM の直接操作: シンプルなアプローチ

最初の実装では、変更が発生するたびに DOM を直接操作するという最も単純なアプローチを使用しました。新しい Todo の追加を処理する方法の簡略版は次のとおりです。

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

このアプローチは直感的で、単純なアプリケーションにはうまく機能しますが、次のような制限があります。

• 各操作は DOM に直接触れます
• アプリケーションの状態を追跡する中央の場所がありません
• 複数の更新間で一貫性を維持するのが困難
• 頻繁に更新すると非効率になる可能性があります

2. 状態ベースの DOM 操作: 構造の追加

2 番目の実装では、状態管理の概念が導入されました。 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];
}

調整と相違について理解する

React によって普及した調整の概念は、望ましい状態に一致するように DOM を効率的に更新することです。私たちの単純な実装は、次の 3 つの重要な側面を示しています。

1. 状態の比較

私たちは、現在と以前の 2 つのバージョンの状態を維持しています。これにより、更新間で何が変更されたかを正確に検出できます。これらの違いを見つけるプロセスは「差分」と呼ばれます。

2. 最小限のアップデート

すべてを再構築するのではなく、変更された部分のみを更新します。

• 新しい項目が DOM に追加されます
• 削除された項目は DOM から削除されます
• 変更されたアイテムはその場で更新されます

3. バッチ処理

すべての差分を計算した後、DOM の更新はすべて 1 回のパスで行われます。これは、変更が発生したときに一度に 1 つずつ更新するよりも効率的です。

スマート DOM 操作の利点

これらの実装を進めるにつれて、いくつかの利点が得られました。

1. パフォーマンス: 変更された部分のみを更新することで、コストのかかる DOM 操作を最小限に抑えます。
2. 予測可能性: 単一の真実の情報源 (状態) があれば、アプリケーションの理解とデバッグが容易になります。
3. スケーラビリティ: アプリケーションが成長しても、差分アプローチは引き続き効率的です。
4. 保守性: 懸念事項を明確に分離することで、コードの理解と変更が容易になります。

現実世界への影響

私たちの実装は簡素化されていますが、React のような最新のフロントエンド フレームワークの背後にある中心的な概念を示しています。 React での実際の Virtual DOM 実装はより洗練されており、以下を処理します:

• 複雑な入れ子構造
• イベントの代表者
• コンポーネントのライフサイクル
• バッチ更新
• ブラウザ間の互換性

結論

ToDo アプリケーションの進化は、DOM 操作へのさまざまなアプローチがどのようにさまざまなトレードオフを伴うかを示しています。直接操作は理解と実装が簡単ですが、状態管理とスマート アップデートを使用したより構造化されたアプローチは、より保守性と拡張性の高いアプリケーションにつながります。

調整と差分の概念は、簡略化された形であっても、React のような最新のフレームワークがなぜ非常に強力であるかを示しています。これらの複雑な更新は自動的に処理されるため、開発者は DOM 更新の最適化ではなく、機能の構築に集中できます。

Web アプリケーションがより複雑になるにつれて、これらの基本概念を理解することがますます重要になります。フレームワークを使用している場合でも、何かを最初から構築している場合でも、DOM 更新がどのように、そしてなぜそのように機能するのかを知ることで、より効率的な開発者になれます。

以上が仮想 DOM への単純な更新からの DOM 操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。