Reactは非常に高速で非常にシンプルですが、どのように機能しますか？ 仮想DOMとは何ですか？ なぜこれを心配する必要があり、古き良きレギュラーDOMに何が起こったのですか？
DOMとは
仮想DOMとは何かを詳しく説明する前に、実際のDOMとは何かについて話しましょう。
DOM（Document Object Modelの略）は、オブジェクトを使用して構造文書を表す方法です。 これは、HTML、XMLなどのデータの表示および相互作用に関する、クロスプラットフォームで言語に依存しない契約です。
WebブラウザーはDOMのコンポーネントを処理し、JavaScriptとCSSを使用してコンポーネントと対話できます。 ドキュメントノードの操作、データの変更、新しいノードの削除と挿入ができます。 現在、DOM APIは実質的にクロスプラットフォームおよびクロスブラウザです。
それで問題は何ですか？
DOMの問題
DOMの主な問題は、動的ユーザーインターフェイス（UI）を作成するように設計されていないことです。 JavaScriptとjQueryのようなライブラリを使用して作業できますが、それらを使用してもパフォーマンスの問題は解決しません。
Twitter、Facebook、Pinterestなどの最新のソーシャルネットワークをご覧ください。
少しスクロールすると、何万ものDOMノードが作成され、効果的に相互作用しますが、これは簡単な作業ではありません。
たとえば、1000 divブロックを5ピクセル左に移動してみてください。
1秒以上かかる場合があります-現代のインターネットには多すぎます。 スクリプトを最適化していくつかのトリックを使用することもできますが、最終的には、巨大なページと動的UIを操作するときに頭痛の種になるだけです。
この問題を解決できますか？ できるようです。
W3Cは現在、新しいShadow DOM標準に取り組んでいます。
Shadow DOMは、W3C標準のワーキングドラフトです。 複数のDOMツリーを1つの階層に結合する方法と、これらのツリーがドキュメント内で相互作用する方法を記述する仕様。これにより、DOMをより適切に組み立てることができます。
別のオプションは、仮想DOMでアプローチを使用することです。
仮想DOMは標準ではなく、最終的にはまだDOMとやり取りしていますが、できる限り少なく効率的に行います。
仮想ドーム
DOMと直接対話する代わりに、その軽量コピーを使用します。 必要に応じてコピーに変更を加えてから、実際のDOMに変更を適用できます。
この場合、DOMツリーはその仮想コピーと比較され、差異が決定され、変更されたものの再描画が開始されます。
このアプローチは、実際のDOMのすべての重い部分を含まないため、より高速に機能します。
しかし、私たちが正しいことをした場合のみです。 2つの問題があります。DOMを正確に再描画するタイミングと、それを効率的に行う方法です。
いつ？
データが変更され、更新が必要な場合。
データが変更されたかどうかを確認するには、2つのオプションがあります。
- これらの最初の「ダーティチェック」は、定期的にデータをポーリングし、データ構造内のすべての値を再帰的にチェックすることです。
- 2番目のオプション-「監視可能」（監視可能）は、状態の変化を監視することです。 何も変わっていなければ、何もしません。 変更された場合、何を更新する必要があるかが正確にわかります。
どうやって？
このアプローチを本当に高速にしているもの：
- 効果的な比較アルゴリズム
- DOMを使用する場合の読み取り/書き込み操作のグループ化
- 効果的な更新のみのサブツリー
ご存知のように、これはそれほど単純ではなく、実装はかなり複雑になることがありますが、このアプローチをプロジェクトに実装するのに役立つライブラリがいくつかあります。
これらの最も有名なライブラリの1つは、Facebook開発チームのReactです。
React JS
React JSは、仮想DOMを使用するというアイデアを広めたユーザーインターフェイスを作成するためにFacebookによって開発されたJavaScriptライブラリです。 ReactはJavaScriptオブジェクトから軽量ツリーを作成し、DOMツリーをシミュレートします。 次に、それらからHTMLを作成します。これは、目的のDOM要素に挿入または追加され、ブラウザでページが再描画されます。
Reactはフレームワークではなくライブラリであるため、AngularまたはEmberとの比較は正しくありません。
その他のライブラリとフレームワーク
- virtual-dom -Matt EschのVirtual DOM実装、差分比較アルゴリズム。
- Mithril-活気のあるアプリケーションを作成するためのJavascriptフレームワーク。
- Bobril -MithrilとReactJsのアプローチに触発されたコンポーネント指向のフレームワーク。
- cito.js-高速でスケーラブルなモジュール式Webアプリケーションを作成するためのJavaScriptフレームワーク。
おわりに
仮想DOMは、DOMツリーを模倣する軽量のJavaScriptオブジェクトを操作することでDOMとの直接的な作業を回避することにより、クライアント側のパフォーマンスを向上させる手法およびライブラリ/アルゴリズムのセットです。
仮想DOMを使用するというアイデアは素晴らしいものですが、新しいものではありません-DOMとの直接的な作業には費用がかかることを長い間知っています。 Reactのようなライブラリを使用して、アプリケーションのパフォーマンスを改善し、非常にシンプルにすることができます。
翻訳者から
元の記事： 仮想DOMとは
注：転送中、一部の自由は許可されますが、合理的な範囲内です。