React の仮想 dom の用途は何ですか?

React では、ページ内の dom 要素を効率的に更新するために仮想 dom が使用されます。仮想 dom は、すべての dom 操作を蓄積し、すべての変更を計算し、dom を 1 回更新することができるため、パフォーマンスを大幅に向上させることができます。 DOM は、クロスエンド アプリケーション用のネイティブ アプリケーション コンポーネントに変換することもできます。

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

react での仮想 DOM の用途は何ですか?

react での仮想 DOM とは何ですか?

はフレームワークの概念です。プログラマは JS オブジェクトを使用して、ページ上で DOM と 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 ノード) の再描画と組版を効果的に削減します。そのため、レンダリングできるのはその一部のみです

推奨される学習: 「

react ビデオ チュートリアル

」

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