How Things Work

Virtuelles DOM & Diffing

Wie React eine virtuelle Darstellung erstellt und sie vergleicht, um minimale DOM-Änderungen zu finden.

How It Works

Das Virtual DOM ist ein leichtgewichtiger JavaScript-Objektbaum, der das echte DOM widerspiegelt. React hält zwei Kopien: den aktuellen Baum und den 'work-in-progress'-Baum, der bei jedem Rendering aufgebaut wird. Anstatt das echte DOM sofort zu berühren, vergleicht React die beiden virtuellen Bäume und berechnet die minimale Menge an benötigten Änderungen — dann wendet es diese in einem einzigen Batch an.

JSX wird zu React.createElement()-Aufrufen kompiliert

Wenn Sie JSX schreiben, wandelt Babel (oder der React-Compiler) es in React.createElement(Typ, Props, ...Kinder)-Aufrufe um. Diese geben einfache JavaScript-Objekte zurück, sogenannte React-Elemente — keine echten DOM-Knoten.

React baut einen Virtual DOM-Baum auf

React.createElement() gibt einen verschachtelten Objektbaum zurück wie '{' type: 'div', props: '{' className: 'box', children: [...] '}' '}'. Dies ist das Virtual DOM — eine günstige In-Memory-Beschreibung, wie die Benutzeroberfläche aussehen soll.

Bei Aktualisierungen baut React einen neuen Virtual DOM-Baum auf

Wenn sich Zustand oder Props ändern, ruft React Ihre Komponentenfunktion erneut auf und erzeugt einen brandneuen Virtual DOM-Baum, der die neue gewünschte Benutzeroberfläche repräsentiert.

Der Diffing-Algorithmus vergleicht alte und neue Bäume

Reacts Diffing-Algorithmus (O(n)-Heuristik) durchläuft beide Bäume gleichzeitig. Er geht davon aus, dass Elemente unterschiedlicher Typen unterschiedliche Bäume erzeugen, und verwendet die key-Prop, um Listenelemente über Renderings hinweg zuzuordnen.

Nur die Unterschiede werden auf das echte DOM angewendet

Nach dem Diffing hat React eine Liste von Mutationen: Diese Prop aktualisieren, diesen Knoten einfügen, jenen Knoten entfernen. Diese werden in der Commit-Phase auf das echte DOM angewendet — dabei werden Reflows und Repaints minimiert.

Key Concepts

📦React Element

Ein einfaches JS-Objekt, das von React.createElement() zurückgegeben wird. Beschreibt Typ, Props und Kinder. Kein echter DOM-Knoten.

🔍Diffing Algorithm

Reacts O(n)-Heuristik zum Vergleichen zweier virtueller Bäume. Nimmt an, dass Elemente gleicher Position denselben Typ haben, sofern sich die Keys nicht unterscheiden.

⚖️Reconciliation

Der Prozess des Vergleichens alter und neuer virtueller Bäume und der Bestimmung der minimalen Menge an benötigten DOM-Operationen.

🔑key prop

Eine stabile Identität für Listenelemente. Ermöglicht React, alte und neue Listenelemente zuzuordnen, auch wenn sie ihre Position gewechselt haben.

📦Batched Updates

React sammelt alle DOM-Mutationen aus einem Reconciliation-Durchlauf und wendet sie gemeinsam an, um Browser-Reflows zu reduzieren.

Von JSX zum Virtual DOM

tsx

1// JSX you write:
2const element = <div className="box"><span>Hello</span></div>;
3
4// Compiles to:
5const element = React.createElement(
6  'div',
7  { className: 'box' },
8  React.createElement('span', null, 'Hello')
9);
10
11// Produces this Virtual DOM object:
12{
13  type: 'div',
14  props: {
15    className: 'box',
16    children: {
17      type: 'span',
18      props: { children: 'Hello' }
19    }
20  }
21}

💡

Why This Matters

Direkte DOM-Manipulation ist teuer, weil der Browser das Layout neu berechnen und neu zeichnen muss. Durch Diffing in JavaScript (schnell) und Bündelung von DOM-Schreibvorgängen (langsam) minimiert React die Anzahl teurer Browser-Operationen. Deshalb fühlen sich React-Apps auch bei komplexen Benutzeroberflächen schnell an.

Common Pitfalls

⚠Verändern Sie das Virtual DOM-Objekt niemals direkt — React setzt Unveränderlichkeit voraus, um Änderungen effizient zu erkennen.

⚠Vermeiden Sie Array-Indizes als Keys in dynamischen Listen. Wenn die Liste neu geordnet wird, ordnet React Elemente nach Position statt nach Identität zu, was zu unnötigen Unmounts und Remounts führt.

⚠Das Virtual DOM ist NICHT kostenlos — das Erstellen von Elementobjekten hat einen Preis. Bei sehr einfachen Benutzeroberflächen ohne Zustand kann einfaches HTML schneller sein.

Real-World Use Cases

1Optimizing Large List Rendering

Scenario

You have a chat app rendering 500+ messages. Scrolling to load older messages causes the entire message list to re-render, taking 300ms and causing visible lag.

Problem

When new messages are appended, React creates a new VDOM tree for the entire list. The diffing algorithm walks all 500+ nodes even though only 20 new messages were added.

Solution

Use windowing (react-window/react-virtualized) to only render visible messages in the VDOM. Combined with proper `key` props, React's diff only processes ~20 visible nodes instead of 500+. The VDOM tree stays small, diffs stay fast.

💡

Takeaway: The VDOM's diffing cost is proportional to tree size, not DOM size. Keeping your VDOM tree small via virtualization is the most effective optimization for large lists.

2Why Inline Objects Cause Unnecessary Diffs

Scenario

A component receives `style={{ color: 'red' }}` as a prop. Despite no visual change, React DevTools shows it re-renders on every parent update.

Problem

Each render creates a NEW style object `{ color: 'red' }`. When React diffs oldProps vs newProps, `oldStyle !== newStyle` (different object reference), so React marks this node as 'changed' and commits a DOM update — even though the actual CSS hasn't changed.

Solution

Hoist the style object outside the component or wrap it in `useMemo`. Now `oldStyle === newStyle` (same reference), the diff correctly marks it as 'unchanged', and React skips the DOM write entirely.

💡

Takeaway: Understanding how the VDOM diff compares props (by reference, not deep equality) reveals why inline objects, arrays, and arrow functions in JSX cause performance issues.

Join the discussion

Comments

Loading comments...

Cookie preferences

We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.