仮想ドムとは
仮想ドムは React の基礎であり、コアコンセプトの一つです。前回のシートで紹介したvirtual domは、diffアルゴリズムと組み合わせることで、ページのインタラクションのパフォーマンスを大幅に向上させる一方で、サーバーサイドレンダリングやネイティブコーディングを含むクロスプラットフォームコーディングの基礎にもなっています。
仮想ドムは、実際にjsとキャッシュの確立の間に実際のドムに相当する、ドムを動作させる必要がある場合、差分アルゴリズムを介して最初の仮想ドムの変更の間の最小の差を計算するためにされ、唯一の最小の差は、実際のドムを更新するには
バーチャルdomとは何かという話に戻りますが、バーチャルdomは基本的にjsオブジェクトです。例を挙げましょう：
<ul id='list'>
<li class='item'>1</li>
<li class='item'>2</li>
<li class='item'>3</li>
</ul>
上記のhtmlは以下のようにvirtual domに変換されます：
const tree = {
tagName: 'ul',
props: {
id: 'list'
},
children: [
{tagName: 'li', props: {class: 'item'}, children: ['1']},
{tagName: 'li', props: {class: 'item'}, children: ['2']},
{tagName: 'li', props: {class: 'item'}, children: ['3']},
]
}
仮想ドムが必要な理由
バーチャルドムがもたらす主なメリットは3つあります：
1.パフォーマンスを向上させる：それはよく知られている実ドムの動作が遅く、仮想ドムが速い。具体的な理由は、実際のドムの操作は、ブラウザの再描画とリフローにつながるときに、実際には、ブラウザは、次の操作を行うことです：
1.ドムツリーの構築
2.CSSスタイルシートツリーの構築
3.domツリーとcssスタイルツリーを組み合わせて、レンダリングするレンダーツリーを形成します。
4.レンダーツリー内の各ノードの位置、サイズ、その他の情報を決定します。
5.コンテンツを対応する場所にレンダリングします。
2.ワンタイム開発、マルチエンドレンダリング。ノード環境にはドムがありませんが、仮想ドムの助けを借りて、実際のドムとサーバー側のレンダリングをシミュレートすることができ、同時にクロスエンド開発の分野では、React Native、Weexおよび他のフレームワークも実現するために仮想ドムに基づいています。
3.Jsx構文と組み合わせることで、仮想ドムは、開発の新しい方法を提供し、広くチームによって開発されたコードの可読性と保守性を向上させるために使用されるコンポーネントベースのアプローチの開発を可能にしながら、ページの開発を宣言することができます。
diff
仮想domの言及は、diffアルゴリズムに言及しなければならない、名前が示すようにdiffアルゴリズムは、更新するように、2つの仮想domツリー間の最小差を計算するために使用されるReactで適用される、2つのツリーアルゴリズムの間の差を計算するために使用されます。しかし、diffアルゴリズムの時間複雑度はO（n^3）であり、これは明らかにreactでは受け入れられませんので、いくつかの変換のための伝統的なdiffアルゴリズムでReact。
1. tree diff: 同じレベルのノードのみを比較。全ツリーのdiffでは、ユーザーが階層レベルをまたいでdomを操作するケースは非常に少ないため、基本的には無視できます。この最適化により、diffアルゴリズムのパフォーマンスが大幅に向上し、時間の複雑さがO(n^3)からO(n)に減少します。
2.コンポーネントの差分：コンポーネントの差分操作のコアは2つのポイントです、最初の2つのコンポーネントが同じタイプのコンポーネントであるかどうかを判断することです、そうでない場合は、コンポーネントとそのサブコンポーネントを置き換えます、それは同じタイプのコンポーネントである場合は、ツリーの差分に続行します。宣言サイクルを開発者に提供していることに注意してください。2つのレンダリングされたコンポーネントのライフサイクルに変更がない場合、元のコンポーネントのコンテンツが直接レンダリングされるように、diffを再帰的に比較することなく、falseを返すことができます。
3. 要素の差分: 要素を比較する場合、Reactには3つの主要な操作があります: 追加、削除、移動です。注意すべき点は、例としてリストコンポーネントの比較です：
ループは新旧のノードを比較し、新しいノードが古いノードと同じでないと判断すると、古いノードを削除して新しいノードを追加します。上記の変更を行う場合、4つの削除と4つの追加が行われます。Reactは、これは非常に非効率的であることを発見しました。Reactは、リストをレンダリングするときに、各ノードに一意のキー値を追加することを提案します。古いノードのキー値はMapにポンプされ、新しいノードをトラバースするときに、古いノードにノードが存在するかどうかを判断し、存在する場合は移動操作のみを実行します。この最適化により、diffのパフォーマンスも大幅に向上します。
まとめ
- 仮想ドムは実ドムの抽象的な表現で、本質は通常のオブジェクト・オブジェクトであり、jsと実ドムの間のキャッシュの層に相当します。
- 仮想ドムの利点は、ページレンダリングのパフォーマンスを向上させ、一度に複数のレンダリングを開発できることです。
- 仮想 dom を使用した diff アルゴリズムは、ページのパフォーマンスを大幅に向上させます。
- 従来のdiffアルゴリズムをベースに、Reactはいくつかの最適化を行いました。 2. componentShouldUpdateフック関数を提供します。 3. 要素のレンダリングパフォーマンスを向上させるためにkey属性を追加します。
