Virtual Dom vs Real Dom

domとは、document object model文書オブジェクトモデルの略字といいます。web applicationのUIをツリー構造で表したもの。

つまり、HTML要素をツリーで表したものをDOMを言います！！javascriptはこのツリーにアクセスして使用します。

 

real domはupdate要素は子要素をまたrenderするので、不要な仕事が増えてしまいます。例えばリストに１００のitemがあって、一つのitemに変更が起きたら、全てのリストをupdateしちゃいます！

 

virtual domはreal domの軽量コピー版domです。

reactでdomを更新しようとしたら、以下の流れで動きます

１。全てのvirtual domがupdaeされる

２。update前のvirtual domと比較

３。変更された分のみ、real domに反映する。