Reactの仮想DOMとdiffアルゴリズムの詳細な説明

var要素 = {
      タグ名: 'div',
      小道具: {
        クラス: 'ボックス'
      },
      子供たち： {
        {
          タグ名: 'p',
          小道具: {
            クラス: 'p1'
          },
          子供達: ['私はp1です']
        }, 
         {
          タグ名: 'p',
          小道具: {
            クラス: 'p2'
          },
          子供たち: [「私はp2です」]
        }, 
        {
          タグ名: 'p',
          小道具: {
            クラス: 'p3'
          },
          子供たち: [「私はp3です」]
        },
      }
    }

関数 Element(タグ名, props, children) {
    this.tagName = タグ名
    this.props = 小道具
    this.children = 子供
}

Element.prototype.render = 関数 () {
    const { tagName, props, children } = this
    var el = document.createElement(タグ名)
    for (props のキー) {
        el.setAttribute(キー、props[キー])
    }
    children.forEach((item) => {
        const childEl = (item instanceof Element) ?
              アイテム.レンダリング():
        document.createTextNode(アイテム)
        el.appendChild(childEl)
    })
    エルを返す
}

virtualDom = new Element('div', { class: 'box' }, [ とする
    新しい要素('p', { クラス: 'p1' }, ['私はp1です']),
    新しい要素('p', { クラス: 'p2' }, ['私はp2です']),
    新しい要素('p', { クラス: 'p3' }, ['私はp3です']),
])

a = virtualDom.render() とします。
ドキュメント本体に子要素を追加します。

// diff関数、2つのツリーを比較する function diff(oldTree, newTree) {
    var patches = {}; // 疑似配列、差異を記録 // 4種類のノードに対してエラー判定を行う dfWork(oldTree, newTree, patches, index)

    パッチを返す

}
関数 dfWork(oldTree, newTree, パッチ, インデックス) {
    現在のパッチを [] にする

    if (1) { // ノードを削除する currentPatch.push()
    } else if (3) { // ノードのテキストを変更する currentPatch.push()

    } else { // ノードのプロパティを変更します。子を確認します // プロパティに対して diff アルゴリズムを実行し、変更をパッチに記録します。
        currentPatch.push({ type: patch.PROPS, props: propsPatches })
        // 次に、子ノードに対して diff アルゴリズムを実行する必要があります diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
    }
}
関数 diffChildren(oldChildren, newChildren, index, patches, currentPatch) {

    // 子ノードに対して diff アルゴリズムを実行し、子ノードを走査し、dfWork を再帰的に呼び出して差分を取り、パッチを取得します

}
// 実際のDOMツリーに変更を適用する function patch(node, patches) {
    // ノードは古い DOM ツリーであり、変更をパッチします。
    // パッチを走査し、ノードをパッチに一致させます。
}
関数applyPatch(ノード、パッチ) {
    // 各ノードには複数の変更がある可能性があるため、switch (patchs.type) {を走査する必要もあります。
        case REPLACE: // ノードの置換 // node.render() 
            壊す;
        case REORDER: // 子ノードを移動、削除し、新しい子ノードを追加します。

            壊す;
        ケースのPROPS:
            // プロパティを設定する
            壊す;
        case TEXT: // ノードテキストを変更する // node.nodeValue
            壊す;

        デフォルト：
            壊す;
    }
}