Lors de la création d'applications Web modernes, la mise à jour efficace de l'interface utilisateur (interface utilisateur) est essentielle pour que les applications restent rapides et réactives. Une stratégie courante utilisée dans de nombreux frameworks (comme React) consiste à utiliser un DOM virtuel et des composants. Cet article expliquera comment les composants sont rendus à l'aide d'un DOM virtuel et comment nous pouvons optimiser le nouveau rendu afin que l'application Web ne devienne pas lente.

1. Qu'est-ce qu'un DOM virtuel ?

Le DOM (Document Object Model) est une structure arborescente qui représente tous les éléments d'une page Web. Chaque fois que vous interagissez avec une page Web (en cliquant sur des boutons, en tapant du texte), le navigateur doit mettre à jour le DOM, ce qui peut être lent.

Un DOM virtuel est comme une copie du vrai DOM mais ne vit qu'en mémoire. Au lieu de mettre à jour le DOM réel directement à chaque fois que quelque chose change, nous mettons d'abord à jour le DOM virtuel. Une fois les modifications apportées, le DOM virtuel se compare à l'ancienne version, trouve les différences (c'est ce qu'on appelle diffing) et met à jour uniquement les parties du DOM réel qui doivent être modifiées.

2. Que sont les composants ?

Dans une application Web moderne, les composants sont les éléments constitutifs de l'interface utilisateur. Considérez-les comme de petites parties réutilisables d’une page Web. Par exemple:

• Un bouton peut être un composant.
• Un en-tête peut être un composant.
• Une liste d'éléments peut être un composant.

Chaque composant décrit à quoi devrait ressembler une partie de l'interface utilisateur. Une fonction de composant renvoie une arborescence DOM virtuel qui représente cette interface utilisateur.

3. Exemple : création d'un composant bouton

Créons un simple composant Button en utilisant un pseudocode. Ce composant renverra un bouton avec du texte et une fonction qui s'exécute lorsque vous cliquez sur le bouton.

// 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])
}

Dans cet exemple :

• Le composant Button prend en compte props (propriétés), comme le texte du bouton et un gestionnaire d'événements lorsqu'on clique dessus.
• Il renvoie un nœud DOM virtuel qui représente un élément avec le texte fourni et le gestionnaire d'événements onClick.

4. Rendu de plusieurs composants

Disons que nous voulons créer une application dotée d'un en-tête et d'un bouton. Chacune de ces parties peut être représentée comme des composants. La structure de l'application pourrait ressembler à ceci :

// 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!")
}

• Le composant App renvoie une arborescence DOM virtuelle contenant deux composants : en-tête et bouton.
• Le composant Header renvoie un nœud Virtual DOM représentant un élément

  .

• Le composant Button fonctionne comme nous l'avons décrit précédemment.

5. Comment fonctionne le rendu initial

Lorsque l'application s'exécute pour la première fois, elle :

1. Appelle les composants : App(), Header() et Button() sont exécutés.
2. Crée le DOM virtuel : le résultat est une arborescence de nœuds DOM virtuels qui représente l'interface utilisateur.
3. Met à jour le vrai DOM : le DOM virtuel est utilisé pour créer les éléments HTML réels dans le vrai DOM.

// 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-rendu et pourquoi nous avons besoin d'optimisation

Disons que quelque chose change dans l'application, comme le texte du bouton. Normalement, l'intégralité de l'application serait restituée, mais cela peut être lent si l'application est volumineuse. Au lieu de cela, nous pouvons optimiser le nouveau rendu en mettant à jour uniquement les parties qui ont changé.

Voici ce qui se passe lors du nouveau rendu :

1. Différent : nous comparons l'ancien DOM virtuel avec le nouveau et déterminons ce qui a changé.
2. Patching : seules les parties du DOM réel qui doivent être mises à jour sont modifiées (ce processus est appelé patching).

Exemple : Modification du texte du bouton

Disons que le texte du bouton passe de « Cliquez sur moi » à « Cliqué ! ». Voici comment nous restituerions le bouton :

// 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. Optimisation du nouveau rendu : Les composants devraient-ils être mis à jour

L'un des principaux moyens d'optimiser le rendu consiste à vérifier si un composant doit réellement être mis à jour. Si rien n'a changé dans les props ou state du composant, nous pouvons ignorer le nouveau rendu de ce composant. C'est là qu'intervient la logique shouldComponentUpdate.

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

Maintenant, avant de refaire le rendu, nous vérifions si le composant doit être mis à jour :

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

8. Utilisation de clés pour l'optimisation de liste

Lors du rendu de listes d'éléments (par exemple, une liste de boutons), nous pouvons optimiser en utilisant des touches pour identifier de manière unique chaque élément. Cela aide l'algorithme de comparaison à faire correspondre les anciens et les nouveaux éléments de la liste et à appliquer uniquement les modifications nécessaires.

// 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 })
    ))
}

Avec touches, si l'un des éléments de la liste change (comme l'ajout ou la suppression d'un bouton), l'algorithme peut rapidement identifier quel bouton a changé et mettre à jour uniquement celui-là.

9. Optimisation des changements d'état

Les composants peuvent également avoir leur propre état. Lorsque l'état d'un composant change, nous souhaitons uniquement restituer ce composant spécifique, pas l'ensemble de l'application. Voici un exemple de bouton avec état :

// 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"])
}

Dans ce cas:

• Le texte du bouton change lorsque vous cliquez dessus.
• Seul le composant ButtonWithState est restitué et le vrai DOM ne met à jour que le texte du bouton.

10. Évitez de restituer les composants parents

Une autre optimisation consiste à éviter de restituer les composants parents lorsque seul un composant enfant change. Par exemple, si le bouton change mais que l'en-tête reste le même, nous pouvons ignorer le nouveau rendu de l'en-tête.

// 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. Conclusion : mises à jour efficaces de l'interface utilisateur avec un DOM virtuel

Pour résumer, nous pouvons décomposer le processus de rendu et d'optimisation des composants à l'aide du DOM virtuel en ces étapes :

1. Rendu initial : la première fois que l'application est rendue, nous construisons l'arborescence DOM virtuelle et la convertissons en DOM réel.
2. Re-rendu : lorsque quelque chose change (comme le texte ou l'état du bouton), nous mettons à jour le DOM virtuel et appliquons uniquement les modifications nécessaires au DOM réel.
3. Optimisation des nouveaux rendus : en utilisant des stratégies telles que ShouldComponentUpdate, des clés pour les listes et des mises à jour basées sur l'état, nous pouvons éviter les nouveaux rendus inutiles, tout en gardant l'application rapide et réactive.

En réfléchissant soigneusement au moment et aux éléments à restituer, nous pouvons nous assurer que les applications Web restent efficaces même si leur complexité augmente. Le Virtual DOM est un outil puissant qui permet d'atteindre cet équilibre entre simplicité et performances !