JSXとバーチャルDOMの基本概念

JSXと仮想DOMは、そのユニークな段階に到達するために、JSを反応させる反応JSの2つの主な概念です.今日、これらの2つの概念を簡潔に議論します.

JSXとは

JSXはJavaScript XMLの頭字語です.JSXは反作用要素を生み出すという意味ではない.JavaScript関数でHTMLのような構文を書くことができます.

なぜJSXか

JSXを使用する理由について詳しく説明する前に、ブラウザによるHTMLレンダリングの仕方を見てみましょう.
ブラウザはHTMLコードを理解できることを知っています.しかし、ブラウザはどのようにフードの下にHTMLコードを実行し、素晴らしいページを表示しますか?ブラウザがHTMLコードをレンダリングするとき、基本的にHTMLパーサを通過し、DOM Tree(Document Object Model for DOM)と呼ばれるオブジェクトのような構造体を作成します.レンダリングの次のステップは添付ファイルです.添付ファイルのフェーズでは、スタイルルールはすべてDOMツリーに付けられ、レンダリングツリーに送られます.最後に、レンダリングツリーは画面上の要素を貼り付けます.
ブラウザがHTMLをDOMツリーに変換する際には、HTML要素ごとにcreateElement ()というドキュメントメソッドを使用します.例えば-

const root = document.getElementById("root");
const h2 = document.createElement("h2");
h2.innerText = "Hello, world!";
root.appendChild(h2);

上記のコードでは、まず、ドキュメントを使用してHTML要素を作成しました.createElement ()メソッドです.ページを解析している間、ブラウザはページ上のすべてのHTML要素に対して同じです.ブラウザのHTMLパーサーがHTML要素を見つけたとき、それをDocument要素を使ってDOM要素に変換します.CreateElementメソッド.したがって、HTMLはCreateElementメソッドの構文上の砂糖だけです.そして、それは我々が単純で簡潔に要素をつくるのを許します.
同様に、反応JSは仮想DOMを有する.仮想DOMのための反応要素を作成する必要があります.我々は反応を使用して反応する要素を作成することができます.CreateElementメソッド.しかし、反応を呼ぶことによって、多重またはネストされた要素を作成するのは退屈です.CreateElementメソッドを繰り返します.JSXは、単純なHTMLのような構文を使用して反応する要素を作成することを可能にすることで、開発者の生活を簡単でシンプルにしました.次の例を参照してください
Hello H 2(H 2に包まれた)とHello H 3(H 3に包まれた)をRadioを使ってルートdivの下のWebページに表示するには.createElementを書く必要があります.

const root = document.getElementById("root");

// Only using React.createElement
const element =  React.createElement('div', null, [
   React.createElement("h2", null, "Hello h2"),
   React.createElement("h3", null, "Hello h3"),
]);

ReactDOM.render(element, root);

しかし、以下のようにJSXを使用することもできます.

const root = document.getElementById("root");

// Using JSX
const element = <div>
   <h2>Hello h2</h2>
   <h3>Hello h3</h3>
</div>

ReactDOM.render(element, root);

仮想DOMと拡散アルゴリズム

JSXのセクションでは、ブラウザDOMを短く説明しました.反応JSは仮想DOMと呼ばれるブラウザーDOMに似た何かの考えに立っています.仮想DOMはブラウザDOMのミラーコピーです.我々はブラウザで反応アプリを実行すると、反応JSは、ブラウザのDOMのコピーを作成し、メモリに保持します.
反応する理由は、仮想DOMがDOM要素上の状態のどんな変化も特定して、迅速かつ効率的にUIに更新することです.
ブラウザDOM内の任意の要素を変更すると、DOMツリー全体を再描画する必要があります.近代的なシングルページのアプリケーションの数十万の州を持つことができます.時々、それはどんな状態変化も見つけて、それに応じてUIを更新するのが高価です.反応は非常に迅速かつ効率的に膨大な量の状態を扱うこの場合に革命をもたらした.
どのように実際にJSは仮想DOMを使用してハンドルを反応?さて、説明しましょう.
以前に述べたように、Readerはブラウザで初めてアプリケーションをレンダリングするときにブラウザDOMの仮想表現を作成します.要素または状態のいずれかがページ内で変更された場合、反応はブラウザーDOMを再レンダリングすることなく前の仮想DOMの別のコピーを作成し、拡散アルゴリズムを使用して前の仮想DOMと新しく作成された仮想DOM間の変更を比較します.反応は非常に効率的かつ迅速にそこに関係しているUIの絵画がないので、それらの違いを見つけることができました.差分を識別した後、ページ全体を再レンダリングすることなくブラウザDOMの差分部分を更新するだけです.
反応はすべてのユースケースに最適な解決策ではありませんが、それは、バニラJSやJQueryを使用して比較して実行されますが、そこでは、仮想DOM概念のためスパのような大規模な数の状態に対処する必要があります.それで、我々は反応JS開発者として反応仮想DOMの明確な概念を保たなければなりません.