まずは前提として通常のDOMを理解しているかになります、軽くおさらいだけしましょう。
DOMは(Document Object Model)の略称で
ドキュメントを操作するためのインターフェース(API)となります。
JavaScriptからHTMLやXMLを自由自在に操作する為の仕組みで窓口みたいなもんですね
ツリー構造・ノードという言葉で説明されています。
通常DOMを詳しく学びたい方はこちらへ
それではもう仮想DOMいきましょうか！
仮想DOMと通常DOMとの違いは??
仮想DOM、VirtualDOMなど呼び方はさまざまですが
ここでは仮想DOMと呼ばせていただきます。
個人的にVirtualDOMって呼び方だとエンタメ系みたいな感じする、仮想DOMはビジネスってかんじ？
ちょっと自分で言っといて何言ってるか分からない
すみませんでした。
仮想DOMは
Reactで管理をするJavaScriptのDOMオブジェクトの事でJSオブジェクトを仮想でDOMを生成し通常のブラウザのレンダリングとは別の管理でしているのが仮想DOMとなります。
ざっくり説明すぎました。
従来(通常)のDOMはJavaScriptやJQueryで何かしらの追加や更新のDOM操作をして、情報を受け取ったらDOM全体を再構築します。
つまり１箇所の更新のみだったとしても、変更した際は必要のない箇所全てを再構築するのでブラウザの再描画までの時間がかなり遅くなります、必要以上にDOMを更新したがるんです…。
一方Reactの仮想DOMでは
更新情報を受けとってもすぐにはブラウザの描画は行わず、情報を受け取ると仮想DOMを再構築します。
つまり変更前の仮想DOMと変更後の仮想DOMこの2種類があるという事になります。
更新箇所があると、変更前と変更後で比較【差分】をし差分があった箇所のみを追加し通常DOMに反映させ再描画をしている流れとなります。
なので通常DOMのように必要以上にDOM全体を再構築するわけではなく、必要箇所のみを変更し通常DOMに反映しているので一切無駄の無いDOM操作でページ表示の高速化向上を実現化したものになります。
そしてReactでは１つ１つの部品として扱います
見た目・操作性・構造これらUIを組み合わせワンセットで１つのコンポーネントとなるのがReactのコンポーネント指向となります。
例えばHTMLなら『headerの中の部品』で１つのコンポーネント、『お問合せフォームの中にある部品』で１つのコンポーネント部品として分けます
更新や追加があっても、お問合せフォームのボタンのみが変更情報として受けとり仮想DOMが再構築され、仮想DOM同士で比較『差分』されその後通常のDOMに反映され再描画されます。
Reactでは仮想DOMとブラウザ(通常)DOMへの反映が分離されていますので
ReactのDOMを使わずに別のを使用することでサーバサイドレンダリング(SSR)などの適用が可能となっています。
FacebookのReactグループ入っているんですが
日本人全然いない…16万人いるのに
海外ではReact.jsはすごい人気なライブラリなので勉強しておいて損はないはずです
この機会にぜひ始めてみて下さい!!。