Detailed explanation of virtual DOM and diff algorithm in react

var element = {
      tagName: 'div',
      props: {
        class: 'box'
      },
      children: {
        {
          tagName: 'p',
          props: {
            class: 'p1'
          },
          children: ['I am p1']
        }, 
         {
          tagName: 'p',
          props: {
            class: 'p2'
          },
          children: ['I am p2']
        }, 
        {
          tagName: 'p',
          props: {
            class: 'p3'
          },
          children: ['I am p3']
        },
      }
    }

function Element(tagName, props, children) {
    this.tagName = tagName
    this.props = props
    this.children = children
}

Element.prototype.render = function () {
    const { tagName, props, children } = this
    var el = document.createElement(tagName)
    for (key in props) {
        el.setAttribute(key, props[key])
    }
    children.forEach((item) => {
        const childEl = (item instanceof Element) ?
              item.render() :
        document.createTextNode(item)
        el.appendChild(childEl)
    })
    return el
}

let virtualDom = new Element('div', { class: 'box' }, [
    new Element('p', { class: 'p1' }, ['I am p1']),
    new Element('p', { class: 'p2' }, ['I am p2']),
    new Element('p', { class: 'p3' }, ['I am p3']),
])

let a = virtualDom.render()
document.body.appendChild(a)

// diff function, compare two trees function diff(oldTree, newTree) {
    var patches = {}; // Pseudo array, record differences // Make error judgments for 4 types of nodes dfWork(oldTree, newTree, patches, index)

    return patches

}
function dfWork(oldTree, newTree, patches, index) {
    let currentPatch = []

    if (1) { // Delete the node currentPatch.push()
    } else if (3) { // Change the text of the node currentPatch.push()

    } else { // Modify the node's props Check children // Perform a diff algorithm on props and record the changes in patches.
        currentPatch.push({ type: patch.PROPS, props: propsPatches })
        // Then you need to perform a diff algorithm on the child nodes diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
    }
}
function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {

    // Perform diff algorithm on child nodes, traverse child nodes, recursively call dfWork, and make differences to get patches

}
// Apply the changes to the actual DOM tree function patch(node, patches) {
    // node is the old DOM tree, patches changes.
    // We will traverse the patches and match the nodes to the patches.
}
function applyPatch(node, patches) {
    // Since each node may have multiple changes, we also need to traverse switch (patchs.type) {
        case REPLACE: // node replacement // node.render() 
            break;
        case REORDER: // Move, delete and add new child nodes.

            break;
        case PROPS:
            // setProps
            break;
        case TEXT: // Modify the node text // node.nodeValue
            break;

        default:
            break;
    }
}