React virtual domの用途は何ですか

react 仮想 dom の用途: 1. 反応コードのパフォーマンスを向上させます。仮想 DOM は js オブジェクトです。js オブジェクトの作成は、実際の DOM を作成するよりもはるかに少ないパフォーマンスを消費します。実際の DOM の作成を置き換えます。仮想 DOM の作成により、DOM のパフォーマンスが大幅に向上します; 2. クロスエンド アプリケーションを実現するには、ブラウザ側で、仮想 DOM を 1 つずつブラウザ DOM ノードに変換するか、DOM のコンポーネントに変換できます。クロスエンド アプリケーションを実現するネイティブ アプリケーション、ターミナル アプリケーション。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react virtual dom の用途は何ですか

1. パフォーマンスが大幅に向上します

2. クロスエンド アプリケーション (React Native) の実現が可能になります。ブラウザ側では、仮想 DOM が個々のブラウザ DOM ノードに変換されます。ネイティブアプリケーションのコンポーネント化も可能で、セグメントをまたいだアプリケーションも実現できます。

なぜパフォーマンスが向上するのか

仮想 DOM がない場合は、実際の DOM が直接作成され、データが変更されるたびに実際の DOM が作成されます。実際の DOM を作成し、実際の DOM を比較し、実際の DOM を変更します。実際の DOM の作成には、多くのパフォーマンスが必要です (DOM ツリーを生成する JS は Web アプリケーション レベルの API を呼び出し、このレベルの API のパフォーマンスが低下するため)は非常に大きい）ので、パフォーマンスが大量に消費されます。

仮想 DOM とは異なります。仮想 DOM は js オブジェクトです。js オブジェクトの作成によって消費されるパフォーマンスは、実際の DOM の作成よりもはるかに小さいです。実際の DOM の作成を作成に置き換えると、仮想 DOM の方が優れており、パフォーマンスが大幅に向上します。

仮想 DOM

仮想 DOM は js オブジェクトです

<div id=&#39;abc&#39;><span>hello world</span></div>//真实DOM
[&#39;div&#39;, {id: &#39;abc&#39;}, [&#39;span&#39;, {}, &#39;hello world&#39;]]//虚拟DOM

ページの読み込みと更新プロセス

1.state データ

2.jsx テンプレート

3. データ テンプレートは仮想 DOM を生成します

4. 仮想 DOM を使用して実際の DOM を生成します

5.状態の変更

6. データ テンプレートは新しい仮想 DOM を生成します

##7. 元の仮想 DOM と新しい仮想 DOM を比較します (差分アルゴリズム)

##8. DOM を直接操作し、異なる値を変更します場所

知識を広げましょう:

仮想 DOM の目的は何ですか?

ページ内の DOM 要素の効率的な更新を実現するために;

従来の Web アプリケーションでは、ユーザー インターフェイスに対するデータの変更をリアルタイムで更新することが多いため、小さな変更が発生するたびにin data を使用すると、DOM ツリーが再レンダリングされます。

仮想 DOM の目的は、すべての操作を蓄積し、すべての変更を統計的に計算し、DOM を均一に更新することです。

パフォーマンスが大幅に向上

クロスエンド アプリケーション (React Native) が可能になります。ブラウザ側では、仮想 DOM が個々のブラウザ DOM ノードに変換されます。ネイティブアプリケーションのコンポーネント化も可能で、セグメントをまたいだアプリケーションも実現できます。

DOM と仮想 DOM の違い

1. 仮想 DOM は植字操作や再描画操作を実行しません

2. 仮想 DOM は頻繁に変更されます。次に、実際の DOM で変更が必要な部分を一度に比較および修正し (注!)、最後に実際の DOM で組版と再描画を行うことで、過剰な DOM ノードの組版と再描画のロスを削減します。 3、実際の DOM 頻繁な組版と再描画の効率は非常に低いです。

4. 仮想 DOM は、最終的には実際の DOM とは異なるため、大規模な領域 (実際の DOM ノード) の再描画と組版を効果的に削減します。その一部しかレンダリングできません

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド

】

以上がReact virtual domの用途は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。