仮想DOM

仮想DOMは、Reactがブラウザーとの対話を最適化するために使用する手法です。

Reactが登場する前の多くの既存のフレームワークは、変更のたびにDOMを直接操作していました。

まず、DOMとは何ですか?

DOM(ドキュメントオブジェクトモデル)は、ページのツリー表現であり、<html>タグ、ノードと呼ばれるすべての子に移動します。

ブラウザのメモリに保存され、ページに表示されるものに直接リンクされます。 DOMには、トラバース、すべてのノードへのアクセス、フィルタリング、変更に使用できるAPIがあります。

APIは、jQueryやその仲間が提供する抽象APIを使用していなかった場合に、何度も見たことがあるおなじみの構文です。

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

Reactは、Reactレンダリングに関係するもの、つまり仮想DOMのために、DOM表現のコピーを保持します。

仮想DOMの説明

DOMが変更されるたびに、ブラウザーは2つの集中的な操作を実行する必要があります。再描画(他の要素に対するレイアウトと配置に影響を与えない要素への視覚的またはコンテンツの変更)とリフロー(ページの一部のレイアウトを再計算する)です。またはページレイアウト全体)。

Reactは仮想DOMを使用して、ページで変更を行う必要がある場合にブラウザーが使用するリソースを減らします。

あなたが電話するときsetState()コンポーネントで、前の状態とは異なる状態を指定すると、Reactはそのコンポーネントを次のようにマークします汚れた。これが重要です。Reactは、コンポーネントが明示的に状態を変更した場合にのみ更新されます。

次に何が起こるかです:

  • Reactは、ダーティとしてマークされたコンポーネントに関連して仮想DOMを更新します(トリガーなどの追加のチェックがいくつかあります)shouldComponentUpdate()
  • 差分アルゴリズムを実行して変更を調整します
  • 実際のDOMを更新します

仮想DOMが役立つ理由:バッチ処理

重要なことは、Reactが変更の多くをバッチ処理し、同時に変更する必要のあるすべての要素を変更することで、実際のDOMに対して一意の更新を実行することです。したがって、変更をレンダリングするためにブラウザーが実行する必要のある再描画とリフローは次のとおりです。一度だけ実行されます。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: