仮想DOMについて知っておくべき理由

前の記事では、DOMについて議論し、これを理解することが反応を理解することが重要であると述べました.その理由は、仮想DOMです.

仮想DOMは何ですか？

仮想DOMを概念として考えると、仮想CodeBaseと呼ばれる何もありません.これは、有用なツールとしてどのような反応を意味し、ユーザーインターフェイスのコンポーネントを作成する状態に対処する(我々は簡単に以下の状態を定義します).
仮想DOMはDOMのメモリ内表現である.それは同じプロパティを持っていますが、DOMのような画面にそれを置く際にすべてのオーバーヘッドを持っていません.DOMが最初に考えられたとき、ページの上で物事を頻繁に変えるという考えは本当に概念でありませんでした.しかし、ウェブサイトがより頻繁に物事を変えるこの能力を持っているより複雑で成長したので、大きな利点です.
仮想DOMについて書かれたものがたくさん見えますが、本質的にそれはすべて、普通の古いJavaScriptオブジェクトです.このオブジェクトは簡単に頻繁に操作することができますし、なぜ反応は、構造としてそれを使用している理由です.
頻繁に物事を変えることで来る仮想DOMへの他の側面は、州の概念です.本質的に、状態を変更することができますし、動的にするページに何かを表示するために使用することができますコンポーネントにデータを格納する方法です.あなたが複雑なウェブサイトでは、変更することが多くのことがありますし、トラックの記録を維持想像することができます.まあ、プレーンDOM操作を介してこれを行うには、扱いにくいタスクになります.これは、反応が最善なので、私は状態に対処するユーザーインターフェイスについて話すとき、これは私が意味するものです.
反応は、我々が宣言することができます、それは我々が反応する方法の内部について気にしないです.私たちは、コンポーネントがどのような状態になっていて、それに応じてDOMを最終的に操作するかを、どのような状態にしたいのかを伝えることができます.また、これには、すべての単一の時間の状態が変更され、仮想DOMが更新されます.これは、我々はすべての州を追跡する方法です.

仮想DOMの基本抽象

これにコードを置きましょう.これは仮想DOMがどのようなものであるかについての非常に取り除かれたバージョンです.
リストのコンポーネントを持っているとします.このように見えるかもしれない

const list = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item"
        }
    ]
};

それで、あなたは今、この仮想DOMがどのように作成されるかをよく考えなければなりませんか?任意のJSXを書くときは、これはReact.Element関数に変換されます.これはオブジェクトを返します、そして、それは仮想DOMの一部であるこのオブジェクトです.あなたがこれについて混乱するときはいつでも、これに戻って考えてください.

仮想DOMを用いた反応

変更を行う必要がある場合、仮想DOMは、仮想仮想DOMを作成することで更新されます.
毎回、JSX要素はReactDOM.render()関数を使用してレンダリングされます.最初は、これは非効率的に見えるかもしれませんが、これをするコストは重要ではありません.
以下は非常に基本的なレベルでの反応の例です.ここでは、仮想DOMの上記の例をコピーしました

const copy = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item one"
        },
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item two"
        }
    ]
};

DOMのこの新しいコピーは、それから前の仮想DOMのスナップショットと比較されます.次に、仮想のDOMのこれらの2つのバージョンの間で何を変える必要があるかについて、指示のセットを生じさせてください.この工程を拡散と呼ぶ.反応はこれらの変更をどのように効率的に行うかを決定します.

const diffs = [
    {
        newNode: { /* new version of list item one */ },
        oldNode: { /* original version of list item one */ },
        index: /* index of element in parent's list of child nodes */
    },
    {
        newNode: { /* list item two */ },
        index: { /* */ }
    }
]

仮想DOMをDOMで本質的に同期させる.また、反応がDOMを一度だけ変更することを意味します.この全プロセスは、仮想DOMを最終的なDOM操作に変更して変更することを和解と呼ぶ.
この美しさは、我々がコーダーとして、これがどのように起こるかについて気にする必要がないということです、反応はこの負担を我々から遠ざけて、我々が他の懸念に集中するのを許します.
だから今、あなたは仮想DOMの基礎に良い理解を持っている必要がありますどのように反応する高構造から動作します.次回まで!

著者について

私は、医療開発者と教育者だけでなく、Web開発者です.私が私のブログと他のポストの上でプロジェクト賢明であるものについての詳細については here を見てください.もしあなたが私と連絡を取りたいなら、ここでお願いします
[email protected]またはTwitterの@ Aaronsmithdev.