仮想のDOMと和解-私が5つのように説明する

DOMとは

DOMはドキュメントオブジェクトモデルを表します.HTML Webページの言語です.これは、Webページの構造を提供する多くの特殊なタグを、複数のページを一緒にリンクする方法を含む.Webページの構造をツリー構造として表現するdocument object . JavaScriptプログラミング言語は、このドキュメントオブジェクトの構造を変更して、Webページに動的な振る舞いをもたらすことができます.
The DOM ( Document Object Model )は、ツリー構造のWebページドキュメントのプログラミングインタフェースです.ドキュメントツリーはDOM Tree .
簡単な例でそれを理解しましょう.ここでは、Webページのタイトルとページの本文にいくつかの情報を表示することを目的とするHTMLコードスニペットです.

上記のコードスニペットをドキュメントツリーとして表現すると、このようになります.HTML要素のそれぞれはnode 木で.

Webページでレンダリングすると、このような情報が表示されます.

さて、段落のテキストを変えなければならない<p> 我々は、能力を見つける必要がある<p> ドキュメントツリーからタグを設定し、新しいテキスト値を設定します.JavaScript DOM APIを使用してこれらをすべて行う必要があります.

const paragraph = document.querySelector("p");
paragraph.innerText = 'Some other text!';

ドキュメント木の特定のノードを見つけるメカニズムは、呼ばれますQuerying the DOM . 新しいノードの追加、ノードの削除、またはドキュメントツリー内のノードの更新DOM Manipulation . DOM操作の結果は、Webユーザーインターフェイスに反映されます.このプロセスはrendering .

DOM操作は高価である

に頻繁に更新DOM 高価です.これは、Webページのパフォーマンスを低下させる可能性がありますし、遅くなります.DOMが木構造で表されるように、問い合わせと更新は通常、レンダリングより速いです.しかし、DOMトリーの良い部分を横断しなければならないなら、ノードが更新するのを見つけることは高価であるかもしれません.
従業員の名前を示して、従業員が結婚しているならば、以下の従業員表を見ましょう.

このテーブルのドキュメントツリー表現を更新するには、毎回、DOM操作が高価になります.

ReactJSにおける仮想DOMと和解

ReactJSはdeclarative . これは、REACTJSの抄録は、開発者からDOM操作のような低レベルの操作が離れていることを意味します.これにより、reactjsはまた、頻繁にDOM操作とレンダリングのために可能なパフォーマンスの問題に取り組むために余分なケアを取ることを確認します.
reactjsは決して更新しませんoriginal DOM 直接(開発者用ユースケースがそれを必要としない限り).reactjsでは、DOMオブジェクトごとに、対応するメモリコピーが作成されます.このコピーをVirtual DOM ( vdom ).
にVirtual DOM ツリー、各要素はノードで表されます.要素の状態が変化するたびに新しい仮想DOMツリーが生成されます.reactjsの拡散アルゴリズムは、以前のバージョンと現在の仮想DOMツリーを比較します.最後に、仮想DOMはアルゴリズムを使用して実際のDOMをDiffusionで更新します.
以下のアニメーションのイメージは、仮想DOMがどのようにオリジナルDOMのコピーとして作成され、どのようにDiffingとUpdateが起こるかを説明します.

どうぞclick on this link 上記の動画を見ない場合は

まず、元のDOMのコピーを作成し、仮想DOMを呼び出します.仮想DOMの各ノードは、要素を表す.

次に、要素の状態更新がある場合、新しい仮想DOMが作成されます.

拡散アルゴリズムは変化の差を識別する.この場合、変更されたノードからのsubtreeは、拡散として識別された.

最後に、ReactJsは、同期でそれを保つためにこれらの変更で元のDOMを更新するバッチ更新を実行します.

どの部分を変更する必要があるかを決定し、それから元のDOMを更新する必要があるかどうかを決定するために、別のツリーを別のツリーでdiffする機構Reconciliation . あなたは学ぶことができますReconciliation here . reactjsと呼ばれる新しい和解エンジンを使用してFiber バージョン16.0以降.あなたは、より多くを読むことができますReact Fiber Architecture here .
それです.私はあなたが仮想DOMと和解の役に立つ初心者に優しい説明を見つけた願っています.

結論

初心者としてReactJS , あなたはどのように仮想DOMの作品は、どのように拡散が発生する、バッチ更新されます知っている必要はありませんが、どのようにReactJsは、アプリケーションのパフォーマンスや暗記のような他の概念の世話をする方法を知って興味を持っている場合は、仮想DOMとレンダリングの概念を理解するいくつかの時間を費やす必要があります.
また、かどうかをするかどうか、仮想のDOMとレンダリングは、あなたのインタビュアーのためのエキサイティングなトピックかもしれません😉! だから、それを意識してください.
あなたがビデオDOMから仮想DOM、和解、Diffingとバッチ更新についてさらに学ぶことに興味があるならば、これをチェックしてください.

終わる前に.

私は知識を共有します.

🌐 Web開発( JavaScript , ReactJS , Next . js , Node . js ,など)

🛡️ Webセキュリティ

💼 キャリア開発

🌱 オープンソース

✍️ コンテンツ作成

接続しましょう.

Side projects on GitHub

Showwcase React Community