Detaillierte Erklärung des virtuellen DOM und des Diff-Algorithmus in React

var Element = {
      tagName: 'div',
      Requisiten: {
        Klasse: "Box"
      },
      Kinder: {
        {
          tagName: "p",
          Requisiten: {
            Klasse: "p1"
          },
          Kinder: ['Ich bin p1']
        }, 
         {
          tagName: "p",
          Requisiten: {
            Klasse: "p2"
          },
          Kinder: ['Ich bin p2']
        }, 
        {
          tagName: "p",
          Requisiten: {
            Klasse: "p3"
          },
          Kinder: ['Ich bin p3']
        },
      }
    }

Funktion Element(tagName, Requisiten, untergeordnete Elemente) {
    this.tagName = Tagname
    this.props = Requisiten
    this.children = Kinder
}

Element.prototype.render = Funktion () {
    const { tagName, Requisiten, untergeordnete Elemente } = dies
    var el = document.createElement(tagName)
    für (Schlüssel in Requisiten) {
        el.setAttribute(Schlüssel, Requisiten[Schlüssel])
    }
    Kinder.fürJedes((Element) => {
        const childEl = (Item-Instanz des Elements)?
              item.render() :
        document.createTextNode(Element)
        el.appendChild(KindEl)
    })
    Rückkehr el
}

let virtualDom = neues Element('div', { Klasse: 'box' }, [
    neues Element('p', { Klasse: 'p1' }, ['Ich bin p1']),
    neues Element('p', { Klasse: 'p2' }, ['Ich bin p2']),
    neues Element('p', { Klasse: 'p3' }, ['Ich bin p3']),
])

lass a = virtualDom.render()
Dokument.Body.AnhängenKind(a)

// Diff-Funktion, vergleiche zwei Bäume Funktion diff(oldTree, newTree) {
    var patches = {}; // Pseudo-Array, Unterschiede aufzeichnen // Fehlerbeurteilungen für 4 Knotentypen vornehmen dfWork(oldTree, newTree, patches, index)

    Rückkehr-Patches

}
Funktion dfWork(alterBaum, neuerBaum, Patches, Index) {
    lass currentPatch = []

    if (1) { // Lösche den Knoten currentPatch.push()
    } else if (3) { // Ändere den Text des Knotens currentPatch.push()

    } sonst { // Eigenschaften des Knotens ändern. Untergeordnete Elemente prüfen. // Einen Diff-Algorithmus für die Eigenschaften ausführen und die Änderungen in Patches aufzeichnen.
        currentPatch.push({ Typ: Patch.PROPS, Eigenschaften: propsPatches })
        // Dann müssen Sie einen Diff-Algorithmus auf den untergeordneten Knoten ausführen diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
    }
}
Funktion diffChildren(alteChildren, neueChildren, Index, Patches, aktuellerPatch) {

    // Diff-Algorithmus auf untergeordneten Knoten ausführen, untergeordnete Knoten durchlaufen, dfWork rekursiv aufrufen und Unterschiede vornehmen, um Patches zu erhalten

}
// Die Änderungen auf die aktuelle DOM-Baumfunktion anwenden patch(node, patches) {
    // Knoten ist der alte DOM-Baum, Patch-Änderungen.
    // Wir werden die Patches durchlaufen und die Knoten den Patches zuordnen.
}
Funktion applyPatch(Knoten, Patches) {
    // Da jeder Knoten mehrere Änderungen aufweisen kann, müssen wir auch switch (patches.type) { durchlaufen.
        Fall REPLACE: // Knoten ersetzen // node.render() 
            brechen;
        Case REORDER: // Verschieben, löschen und neue untergeordnete Knoten hinzufügen.

            brechen;
        Fall-Props:
            // setzeProps
            brechen;
        case TEXT: // Ändere den Knotentext // node.nodeValue
            brechen;

        Standard:
            brechen;
    }
}