javascript - React における仮想 DOM の効率が DOM を直接操作するよりも速いのはなぜですか?

Question

react には仮想 DOM の概念がありますか?
これとネイティブ DOM 操作の違いは、JS を使用して仲介と同様の仮想 DOM を生成することです。
これは、JS を使用して実装された DOM です。一部の記録は、再レンダリング時に区別された部分の部分レンダリングを実行します。これにより、ページ全体のレンダリングが回避されますか?では、DOM のネイティブ操作はページ全体をレンダリングすることなのでしょうか?ネイティブが変更されるたびに innerHTML を直接リセットするという例をネット上でよく見かけますが、この操作で大量のデータが使用されると、GG になりますね。仮想 DOM は変更を記録し、その diff アルゴリズムを使用して最適化し、最後に変更がある箇所をローカルにレンダリングします。比較によって変更を見つけて、diff アルゴリズムを使用して、指定された場所の innerHTML を変更することもできますか?この効率は仮想 dom よりも悪くなりますか?解決する＃＃＃

Answer 1

私の理解では、次の 2 つのことができれば React よりも速く実行できるということです:

1. 不必要な再レンダリングを避けてください。

2. より良い差分アルゴリズムを使用してください!

詳細については、

著者の回答をご覧ください。 stackoverflow上virtual dom

Answer 2

それは次のとおりです:
まず第一に、仮想 dom は直接ネイティブ操作よりも高速ではありません。いわゆる「高速」は条件付きです。
たとえば、数値 +1 のように、dom を直接操作した方が高速になります。ルールは、手動で dom を操作するたびに、変更すべきものだけを変更することです。そうすれば、dom の操作は常に仮想 dom より高速になります
ただし、変更が多くの​​場所に接続されている場合は、状態を維持するために、仮想 dom の自動差分は間違いなく、より多くの心配を省きます。
たとえば、リストでは、リスト項目にはいいね、返信数、その他の情報などのステータスがあり、動的に追加されます。この時点で、dom を直接操作するのは非常に面倒です。
仮想 dom の中心となるのは diff で、調整すべき領域を自動的に計算し、調整すべき領域のみを変更します。保存されるのは実行速度などの小さな速度ではなく、開発速度/メンテナンス速度/ロジックの単純さなどの「全体的な速度」です。もちろん、仮想 DOM にも欠点はありますが、それについては説明しません。ここに

Answer 3

すべてのページのすべての DOM 変更を最適化するために多大な労力を費やした場合、自動化された仮想 DOM よりも確実に高速になります
問題は、通常の状況ではこれを実行しないことです。
したがって、ほとんどの場合、仮想 DOM はより高速な条件下でより強力な機能 (キャンバス上にコントロールをレンダリングするなど) を提供できます。

Answer 4

Visual DOM は、DOM を直接操作するよりも高速ではありません (記述したコードが十分に優れている場合)。これは、React のすべての再レンダリング メカニズムが原因であるようです。つまり、React では、変更を行うとアプリケーション全体を再レンダリングする必要があり、それが実際の DOM である場合、そのようなパフォーマンスは許容できません。

詳しくはYoudaさんの回答をご覧ください

Answer 5

(VDOM diff を使用して DOM を選択的に更新する) (通常は) (毎回 DOM を再構築する) よりも高速です

diff アルゴリズムは一般に、時間の複雑さを軽減するために品質を犠牲にしており、最小の差分が得られることは保証されていません。その後、差分結果が DOM を再構築するように複数の VDOM を構築できるはずです。この場合、VDOM の速度が遅くなる可能性があります。