Beim Erstellen moderner Webanwendungen ist eine effiziente Aktualisierung der Benutzeroberfläche (UI) unerlässlich, um Apps schnell und reaktionsfähig zu halten. Eine in vielen Frameworks (wie React) häufig verwendete Strategie besteht darin, ein virtuelles DOM und Komponenten zu verwenden. In diesem Artikel wird erklärt, wie Komponenten mithilfe eines virtuellen DOM gerendert werden und wie wir das erneute Rendern optimieren können, damit die Web-App nicht langsam wird.

1. Was ist ein virtuelles DOM?

Das DOM (Document Object Model) ist eine baumartige Struktur, die alle Elemente auf einer Webseite darstellt. Jedes Mal, wenn Sie mit einer Webseite interagieren – auf Schaltflächen klicken, Text eingeben – muss der Browser das DOM aktualisieren, was langsam sein kann.

Ein virtuelles DOM ist wie eine Kopie des echten DOM, lebt aber nur im Speicher. Anstatt das reale DOM jedes Mal direkt zu aktualisieren, wenn sich etwas ändert, aktualisieren wir zuerst das virtuelle DOM. Sobald Änderungen vorgenommen werden, vergleicht sich das virtuelle DOM mit der alten Version, findet die Unterschiede (dies wird als Unterschiede bezeichnet) und aktualisiert nur die Teile des realen DOM, die geändert werden müssen.

2. Was sind Komponenten?

In einer modernen Web-App sind Komponenten die Bausteine ​​der Benutzeroberfläche. Betrachten Sie sie als kleine, wiederverwendbare Teile einer Webseite. Zum Beispiel:

• Eine Schaltfläche kann eine Komponente sein.
• Ein Header kann eine Komponente sein.
• Eine Liste von Elementen kann eine Komponente sein.

Jede Komponente beschreibt, wie ein Teil der Benutzeroberfläche aussehen soll. Eine Komponentenfunktion gibt einen virtuellen DOM-Baum zurück, der diese Benutzeroberfläche darstellt.

3. Beispiel: Erstellen einer Schaltflächenkomponente

Lassen Sie uns eine einfache Button-Komponente mit Pseudocode erstellen. Diese Komponente gibt eine Schaltfläche mit Text und eine Funktion zurück, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird.

// Component to display a button
function Button(props) {
    // The Button component returns a Virtual DOM node for a  element
    return new VirtualNode("button", { onClick: props.onClick }, [props.text])
}

In diesem Beispiel:

• Die Schaltflächenkomponente nimmt Requisiten (Eigenschaften) auf, wie den Text für die Schaltfläche und einen Ereignishandler für den Fall, dass darauf geklickt wird.
• Es gibt einen virtuellen DOM-Knoten zurück, der ein -Element mit dem bereitgestellten Text und dem onClick-Ereignishandler darstellt.

4. Rendern mehrerer Komponenten

Angenommen, wir möchten eine App erstellen, die einen Header und eine Schaltfläche hat. Jeder dieser Teile kann als Komponenten dargestellt werden. Der Aufbau der App könnte so aussehen:

// App component with a header and button
function App() {
    return new VirtualNode("div", {}, [
        new Header(), // The Header component
        new Button({ text: "Click Me", onClick: handleClick }) // The Button component
    ])
}

// Header component
function Header() {
    return new VirtualNode("h1", {}, ["Welcome to the App!"])
}

// Function to handle button clicks
function handleClick() {
    console.log("Button clicked!")
}

• Die App-Komponente gibt einen virtuellen DOM-Baum zurück, der zwei Komponenten enthält: Header und Button.
• Die Header-Komponente gibt einen virtuellen DOM-Knoten zurück, der ein

  -Element darstellt.

• Die Button-Komponente funktioniert wie zuvor beschrieben.

5. Funktionsweise des ersten Renderings

Wenn die App zum ersten Mal ausgeführt wird:

1. Ruft die Komponenten auf: App(), Header() und Button() werden ausgeführt.
2. Erstellt das virtuelle DOM: Das Ergebnis ist ein Baum virtueller DOM-Knoten, der die Benutzeroberfläche darstellt.
3. Aktualisiert das reale DOM: Das virtuelle DOM wird verwendet, um die tatsächlichen HTML-Elemente im realen DOM zu erstellen.

// Initial render of the app
function renderApp() {
    let virtualDOM = App()          // Render the app's Virtual DOM
    let realDOM = createRealDOM(virtualDOM)  // Convert the Virtual DOM into real DOM elements
    attachToPage(realDOM)           // Attach the real DOM elements to the webpage
}

6. Re-Rendering und warum wir eine Optimierung brauchen

Nehmen wir an, dass sich etwas in der App ändert, beispielsweise der Schaltflächentext. Normalerweise würde die gesamte App neu gerendert, dies kann jedoch langsam sein, wenn die App groß ist. Stattdessen können wir das erneute Rendern optimieren, indem wir nur die Teile aktualisieren, die sich geändert haben.

Folgendes passiert, wenn ein erneutes Rendern erfolgt:

1. Unterschiede: Wir vergleichen das alte virtuelle DOM mit dem neuen und finden heraus, was sich geändert hat.
2. Patching: Nur die Teile des echten DOM, die aktualisiert werden müssen, werden geändert (dieser Vorgang wird als Patching bezeichnet).

Beispiel: Ändern des Schaltflächentextes

Angenommen, der Text der Schaltfläche ändert sich von „Click Me“ zu „Clicked!“. So würden wir die Schaltfläche neu rendern:

// New Button component with updated text
function Button(props) {
    return new VirtualNode("button", { onClick: props.onClick }, [props.text])
}

// Re-rendering with the new text
let oldButton = Button({ text: "Click Me", onClick: handleClick })
let newButton = Button({ text: "Clicked!", onClick: handleClick })

// Diff the old and new Button
let diffResult = diff(oldButton, newButton)

// Patch the real DOM with the changes
patch(realButtonDOM, diffResult)

7. Re-Rendering optimieren: Sollten Komponenten aktualisiert werden

Eine der wichtigsten Möglichkeiten zur Optimierung des erneuten Renderns besteht darin, zu prüfen, ob eine Komponente tatsächlich aktualisiert werden muss. Wenn sich an den props oder dem state der Komponente nichts geändert hat, können wir das erneute Rendern dieser Komponente überspringen. Hier kommt die Logik shouldComponentUpdate ins Spiel.

// Function to check if a component should update
function shouldComponentUpdate(oldProps, newProps) {
    return oldProps !== newProps // Only update if the props have changed
}

Jetzt prüfen wir vor dem erneuten Rendern, ob die Komponente aktualisiert werden soll:

// Example: Optimized re-rendering of Button component
function renderButtonIfNeeded(oldButton, newButton) {
    if (shouldComponentUpdate(oldButton.props, newButton.props)) {
        let realButton = createRealDOM(newButton)
        patch(realButton)
    }
}

8. Verwendung von Schlüsseln zur Listenoptimierung

Beim Rendern von Elementlisten (z. B. einer Liste von Schaltflächen) können wir optimieren, indem wir Tasten verwenden, um jedes Element eindeutig zu identifizieren. Dies hilft dem Differenzierungsalgorithmus, alte und neue Elemente in der Liste abzugleichen und nur die notwendigen Änderungen anzuwenden.

// List of buttons with unique keys
function ButtonList(items) {
    return new VirtualNode("div", {}, items.map(item => 
        new Button({ key: item.id, text: item.text, onClick: handleClick })
    ))
}

Wenn sich mit den Tasten eines der Elemente in der Liste ändert (z. B. das Hinzufügen oder Entfernen einer Schaltfläche), kann der Algorithmus schnell erkennen, welche Schaltfläche sich geändert hat, und nur diese aktualisieren.

9. Optimierung von Zustandsänderungen

Komponenten können auch ihren eigenen Zustand haben. Wenn sich der Status einer Komponente ändert, möchten wir nur diese bestimmte Komponente neu rendern, nicht die gesamte App. Hier ist ein Beispiel für eine Schaltfläche mit dem Status:

// Button component with state
function ButtonWithState() {
    let [clicked, setClicked] = useState(false) // Create state for button

    function handleClick() {
        setClicked(true) // Update state when clicked
    }

    return new VirtualNode("button", { onClick: handleClick }, [clicked ? "Clicked!" : "Click Me"])
}

In diesem Fall:

• Der Text der Schaltfläche ändert sich, wenn darauf geklickt wird.
• Nur die ButtonWithState-Komponente wird neu gerendert und das echte DOM aktualisiert nur den Schaltflächentext.

10. Vermeiden Sie das erneute Rendern übergeordneter Komponenten

Eine weitere Optimierung besteht darin, das erneute Rendern übergeordneter Komponenten zu vermeiden, wenn sich nur eine untergeordnete Komponente ändert. Wenn sich beispielsweise die Schaltfläche ändert, der Header jedoch gleich bleibt, können wir das erneute Rendern des Headers überspringen.

// Optimized App component
function App() {
    if (!shouldComponentUpdate(oldHeaderProps, newHeaderProps)) {
        return oldHeader // Reuse the old Header if it hasn't changed
    }

    return new VirtualNode("div", {}, [
        new Header(), // Re-render the Header only if necessary
        new ButtonWithState() // Button re-renders based on state
    ])
}

11. Fazit: Effiziente UI-Updates mit einem virtuellen DOM

Zusammenfassend können wir den Prozess des Renderns und Optimierens von Komponenten mithilfe des virtuellen DOM in folgende Schritte unterteilen:

1. Erstes Rendern: Beim ersten Rendern der App erstellen wir den virtuellen DOM-Baum und konvertieren ihn in das echte DOM.
2. Erneutes Rendern: Wenn sich etwas ändert (wie der Schaltflächentext oder der Status), aktualisieren wir das virtuelle DOM und wenden nur die notwendigen Änderungen auf das reale DOM an.
3. Re-Renderings optimieren: Durch die Verwendung von Strategien wie ShouldComponentUpdate, Schlüsseln für Listen und zustandsbasierten Aktualisierungen können wir unnötiges erneutes Rendern vermeiden und die App schnell und reaktionsfähig halten.

Indem wir sorgfältig darüber nachdenken, wann und was neu gerendert werden soll, können wir sicherstellen, dass Webanwendungen auch bei zunehmender Komplexität effizient bleiben. Das Virtual DOM ist ein leistungsstarkes Tool, das dabei hilft, dieses Gleichgewicht zwischen Einfachheit und Leistung zu erreichen!