React仮想DOMの理解

Reactフレームは今使っている人がとても多いです.Reactはなぜこのように人気がありますか?仮想DOMの概念を導入して性能を向上させたからだと思います.なぜバーチャルDOMを導入すると性能が向上するのですか?以下はバーチャルDOMの原理を説明したいです.
バーチャルDOMとは?
Reactでは、まずリアルなDOMをJavaScriptオブジェクト、すなわち仮想DOMとして抽象化します.例えば、仮想DOMを構築できます.

var element = {
    element: 'ul',
    props: {
        id:"ulist"
    },
    children: [
    { element: 'li', props: { id:"first" }, children: ['     List  '] },
    { element: 'li', props: { id:"second" }, children: ['     List  '] }
    ]
}

仮想DOMオブジェクトを実際のDOMに変換できるように関数を調整するために、上のオブジェクトをコンストラクションでカプセル化します.

function Element( tagname, props, children ) 
{
      
    this.TagName = tagname; 
    this.props = props; 
    this.children = children; 
}

var u = new Element( 'ul', { id: 'ulist'}, [
    new Element( 'li', { id:"first" }, ['     List  ']), 
    new Element( 'li', { id:"first" }, ['     List  '])
    ]);

この時のeはElementオブジェクトで、TagName、props及びchildren属性が含まれています.そしてchildrenもElement対象です.このオブジェクトを実際のDOM構造に変換する方法を考えてみましょう.

Element.prototype.render = function( ) {
     
    var d = document.createElement( this.TagName );
    for( key in this.props) {
        d.setAttribute( key, this.props[key] );
    }

    this.children.forEach( function(child){
     
        if(child instanceof Element) {
            tnode = child.render();
        }
        else
        {
            tnode = document.createTextNode(child);
        }
        d.appendChild(tnode);
    })
    return d;
}

let ele = u.render();
document.body.appendChild(ele);

これにより、私たちが作成した仮想DOMオブジェクトを実際のDOMに変換し、ページに表示します.
Reactにおける仮想DOMの原理
Reactでは、一つのレンダー関数が仮想DOMツリーを作っています.そして、Reactではstate移行の過程があります.だから、stateが変化するたびに、レンダー関数をトリガして、仮想DOMツリーを再構成します.新旧の仮想DOMツリーとの違いを比較して、差異を記録し、差異部分に対応するリアルDOMのみを操作する.どのように新旧仮想DOMツリーとの比較を行いますか?ここではDiffアルゴリズムを採用しています.Diffアルゴリズムは複雑で、主な考え方はこうです.まず、各生成された仮想DOMツリー上の各ノードは、新たなDOMツリーが2回目に生成されたときに、新しいツリー上の対応するノードを元のツリー上の各ノードと比較し、異なる場合には、この違いを記録する.また、違いは様々な種類に分けられます.

    ；
    ；
       
  、  、    ；

各種類の記録に差異がある場合、異なる差異に対して異なる操作を行う.

  ，          JS repaceChild()  ；      ，   setAttribute()    。

具体的なアルゴリズムの詳細については、まだ深く研究していません.
参照-仮想DOMの理解方法