React 仮想 DOM の使用法: 1. React コードのパフォーマンスを向上させる 仮想 DOM は JS オブジェクトです。実際の DOM の作成を仮想 DOM の作成に置き換えるよりも、パフォーマンスの消費が大幅に軽減されます。 DOM はパフォーマンスの向上に多大な影響を及ぼします。2. クロスターミナル アプリケーションを実現するには、ブラウザ側で仮想 DOM を個々のブラウザ DOM ノードに変換するか、ネイティブ アプリケーションのコンポーネントに変換してクロスターミナルを実装します。アプリケーション。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
1. パフォーマンスが大幅に向上
2. クロスエンド アプリケーション (React Native) が可能になります。ブラウザ側では、仮想 DOM が個々のブラウザ DOM ノードに変換されます。ネイティブアプリケーションのコンポーネント化も可能で、セグメントをまたいだアプリケーションも実現できます。
なぜパフォーマンスが向上するのか
仮想 DOM がない場合は、データが変更されるたびに実際の DOM が作成され、その後、実際の DOM が比較され、実際の DOM が変更されます。 DOM は大量のパフォーマンスを消費します (JS によって生成された DOM ツリーは Web アプリケーション レベルの API を呼び出すため、このレベルの API のパフォーマンス損失は非常に大きくなります)。
仮想 DOM は異なります。js オブジェクトを作成すると、実際の DOM を作成するよりもパフォーマンスが大幅に向上します。
仮想 DOM
仮想DOMはjsオブジェクトです
<div id='abc'><span>hello world</span></div>//実際の DOM['div', {id: 'abc'}, ['span', {}, 'hello world' ]]//仮想 DOMページの読み込みと更新のプロセス
1.状態データ
2.jsxテンプレート
3. データ + テンプレートによる仮想 DOM の生成
4. 仮想 DOM を使用して実際の DOM を生成する
5.状態変化
6. データ + テンプレートにより新しい仮想 DOM が生成される
7. 元の仮想 DOM と新しい仮想 DOM を比較します (差分アルゴリズム)
8. DOMを直接操作して、さまざまな場所を変更する
知識を広げてください:
仮想 DOM の目的は何ですか?
ページ内の DOM 要素を効率的に更新するため。
従来の Web アプリケーションでは、ユーザー インターフェイスに対するデータの変更をリアルタイムで更新することが多いため、データの小さな変更が発生するたびに DOM ツリーが再レンダリングされます。
仮想 DOM の目的は、すべての操作を蓄積し、すべての変更を統計的に計算し、DOM を均一に更新することです。
パフォーマンスが大幅に向上
クロスエンド アプリケーション (React Native) が可能になります。ブラウザ側では、仮想 DOM が個々のブラウザ DOM ノードに変換されます。ネイティブアプリケーションのコンポーネント化も可能で、セグメントをまたいだアプリケーションも実現できます。
DOM と仮想 DOM の違い
1. 仮想 DOM は植字操作や再描画操作を実行しません。
2. 仮想 DOM を頻繁に修正し、実際の DOM で変更が必要な部分を一度に比較および修正し (注!)、最後に実際の DOM で組版と再描画を実行して、余分な組版と再描画のロスを削減します。 DOM ノード。
3. 実際の DOM を頻繁に植字したり再描画したりすると、効率が非常に低くなります。
4. 仮想 DOM は、最終的には実際の DOM とは異なり、その一部しかレンダリングできないため、大規模領域 (実際の DOM ノード) の再描画と植字を効果的に削減します。