仮想DOMとは何ですか？

最近、私はFacebookのReactフレームワークを見ました。「仮想DOM」という概念を使っていますが、私にはよくわかりませんでした。

仮想DOMとは何ですか？利点は何ですか？

Reactは、DOMの一部を表すカスタムオブジェクトのツリーを作成します。たとえば、UL要素を含む実際のDIV要素を作成する代わりに、React.ulオブジェクトを含むReact.divオブジェクトを作成します。実際のDOMに触れたり、DOM APIを経由したりすることなく、これらのオブジェクトを非常にすばやく操作できます。次に、コンポーネントをレンダリングするときに、この仮想DOMを使用して、2つのツリーを一致させるために実際のDOMで何を行う必要があるかを理解します。

仮想DOMは青写真のように考えることができます。DOMを構築するために必要なすべての詳細が含まれていますが、実際のDOMに入る重い部分をすべて必要としないため、作成と変更がはるかに簡単です。

例を挙げましょう—非常にナイーブなものですが、家の部屋で何かがめちゃくちゃになっていて、それを掃除する必要がある場合、最初のステップは何ですか？めちゃくちゃになっている部屋や家全体を掃除しますか？答えは間違いなく、掃除が必要な部屋だけを掃除するということです。これが仮想DOMの機能です。

通常のJSは、変更が必要な部分だけをレンダリングするのではなく、DOM全体をトラバースまたはレンダリングします。

したがって<div>、DOMに別のDOM を追加したい場合など、変更がある場合は常に、実際のDOMで実際に変更を行わない仮想DOMが作成されます。この仮想DOMを使用して、これと現在のDOMの違いを確認します。そして、<div>DOM全体を再レンダリングする代わりに、異なる部分（この場合は新しい）のみが追加されます。

仮想DOMとは何ですか？

仮想DOMは、ページに変更が加えられる前にReactコンポーネントによって生成される実際のDOM要素のメモリ内表現です。

これは、呼び出されているrender関数と画面上の要素の表示との間で行われるステップです。

コンポーネントのrenderメソッドはいくつかのマークアップを返しますが、それはまだ最終的なHTMLではありません。これは、実際の要素になるメモリ内の表現です（これはステップ1です）。次に、その出力は実際のHTMLに変換されます。これは、ブラウザーに表示されるものです（これはステップ2です）。

それでは、仮想DOMを生成するためにこれをすべて行うのはなぜですか 簡単な答え—これは反応を速くすることを可能にするものです。これは、仮想DOMの比較によって行われます。2つの仮想ツリー（古いものと新しいもの）を比較し、実際のDOMに必要な変更のみを加えます。

Intro To React＃2からのソース

A virtual DOM：（VDOM）は新しい概念ではありませんhttps://github.com/Matt-Esch/virtual-dom。

VDOMは戦略的に、単一のページアプリケーションですべてのノードを再描画せずにDOMを更新します。ツリー構造でノードを見つけるのは簡単ですが、SPAアプリのDOMツリーは非常に大きくなる可能性があります。イベントが発生した場合のノードの検索と更新は、時間効率が良くありません。

VDOMは、実際のdomの高ラベル抽象化を作成することにより、この問題を解決します。VDOMは、実際のDOMの高レベルの軽量インメモリツリー表現です。

たとえば、DOMにノードを追加することを検討してください。VDOMのコピーをメモリに保持する

1. 新しい状態でVDOMを作成する
2. 差分を使用して古いVDOMと比較してください。
3. 実際のDOMの異なるノードのみを更新します。
4. 新しいVDOMを古いVDOMとして割り当てます。

これは、ReactJSと一緒によく言及される仮想DOMの簡単な説明と繰り返しです。

DOM（Document Object Model）は構造化テキストを抽象化したものです。つまり、HTMLコードとCSSで構成されています。これらのHTML要素はDOMのノードになります。DOMを操作する以前の方法には制限があります。仮想DOMは、Reactが作成または使用されるずっと前に作成されたリテラルHTML DOMを抽象化したものですが、ここでは、ReactJSと組み合わせて使用​​します。仮想DOMは軽量で、ブラウザのDOM実装から切り離されています。仮想DOMは、本質的には、ある時点におけるDOMのスクリーンショット（またはコピー）です。開発者の観点から見ると、DOMは本番環境であり、仮想DOMはローカル（開発）環境です。Reactアプリでデータが変更されるたびに、ユーザーインターフェイスの新しい仮想DOM表現が作成されます。

ReactJSで静的コンポーネントを作成するために必要な最も基本的な方法は次のとおりです。

renderメソッドからコードを返す必要があります。クラスはJavaScriptで予約語であるため、すべてのクラスをclassNameに変換する必要があります。より大きな変更は別として、仮想DOMには表示されるがHTML DOMには表示されない3つの属性（key、ref、dangerouslySetInnerHTML）を含む2つのDOMの間には小さな違いがあります。

仮想DOMを使用する際に理解しておくべき重要なことは、ReactElementとReactComponentの違いです。

ReactElement

• ReactElementは、DOM要素の軽量でステートレスで不変の仮想表現です。
• ReactElement-これはReactの主要なタイプであり、仮想DOMに存在します。

• ReactElementsはHTML DOMにレンダリングできます

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSXはHTMLタグをReactElementsにコンパイルします

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent-ReactComponentはステートフルなコンポーネントです。
• React.createClassはReactComponentと見なされます。
• 状態が変化するたびに、コンポーネントが再レンダリングされます。

ReactComponentの状態が変化するときはいつでも、HTML DOMへの変更をできるだけ少なくしたいので、ReactComponentはReactElementに変換され、仮想DOMに挿入して、すばやく簡単に比較および更新できます。

Reactがdiffを知っている場合、それはDOMで実行される低レベル（HTML DOM）コードに変換されます。

それはきちんとした概念です。エラーが発生しやすく、変更可能な状態に依存するDOMを直接操作する代わりに、仮想DOMと呼ばれる値を出力します。次に、仮想DOMはDOMの現在の状態と比較され、現在のDOMを新しいDOMのようにするDOM操作のリストが生成されます。これらの操作はバッチですばやく適用されます。

ここから撮影。

仮想DOMは、状態の変化に基づいてノードのサブツリーを選択的にレンダリングするHTML DOMの抽象概念です。コンポーネントを最新の状態に保つために、最小限のDOM操作が行われます。

仮想Domは、Domの1つのコピーを作成します。仮想domはdomと比較され、仮想domは変更されたdomのその部分のみを更新します。それはdom全体をレンダリングするのではなく、domの更新された部分をdomに変更しただけです。それは非常に時間がかかり、この機能から、私たちのアプリは高速に動作します。

すべての答えは素晴らしいです。私はたぶん現実世界の比喩を与えることができる類推を思いつきました。

実際のDOMは部屋のようなもので、ノードは部屋の家具です。仮想DOMは、この現在の部屋の青写真を描くようなものです。

私たちは皆、家具の移動の経験があります。それは非常に疲れます（コンピューターのビューを更新するのと同じ概念です）。したがって、位置を変更したり、家具（ノード）を追加したりする場合は、必要な変更のみを行います。

青写真はそれを達成するための救助のために来ました。新しい設計図を描き、元の設計図との違いを比較します。これにより、変更された部分と同じ部分がわかります。次に、実際の部屋に必要な変更を加えます（実際のDOMで変更されたノードを更新します）。ばんざーい。

（一部の人が思うかもしれませんが、なぜ仮想DOMに依存し、実際のDOMを直接比較する必要がないのでしょうか？そうですね、実際のDOMを比較すると、別の実際の部屋を作成して元の部屋と比較する必要があります。コストがかかりすぎます。）

この問題について秩序と意味を作りましょう。React（またはその他のライブラリ）は、JavaScriptの「レイヤー」です。

仮想domなどはなく、接続されていないdomがあります。

簡単なjavascriptで説明させてください：

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

この時点では、添付されていないため、domに表示されないDivを作成しました。

しかし、アクセス、属性、値の追加、変更などができます。

一度呼び出すと：（exの場合、本文に追加）

    document.body.appendChild(vDom['newDiv'])

それから私たちはそれを見るでしょう。

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)