React と Vue の差分アルゴリズムの違いは何ですか?

違い: 1. ノード要素のタイプが同じでも className が異なる場合、Vue はそれを別のタイプの要素とみなし、削除して再構築しますが、react はそれを別のタイプの要素であるとみなします。同じタイプのノードで、ノード属性のみを変更する; 2. リスト比較 はい、vue は両端から中央への比較方法を使用しますが、react は左から右への比較方法を使用します。

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

react と vue の差分アルゴリズムの違いは何ですか

diff アルゴリズムについて話す前に、まず仮想 DOM について理解しましょう:

仮想 DOM は実際の DOM ノードのいくつかの基本属性のみを保持し、ノード間の階層関係は JavaScript と DOM の間に確立される「キャッシュ」層に相当します。

仮想DOMでは実際にオブジェクトを用いてDOMを記述し、前後の2つのオブジェクトの差分を比較し、最終的に変更された部分のみを再描画することで描画効率を高めます。

diff アルゴリズムとは

React は 2 つの仮想 DOM ツリーを同時に維持する必要があります。1 つは現在の DOM 構造を表し、もう 1 つは現在の DOM 構造を表します。もう 1 つは、React 状態の変更が再レンダリングされるときに生成されます。 React は 2 つのツリーの違いを比較して、DOM 構造を変更する必要があるかどうか、およびその変更方法を判断します。

Diff アルゴリズムは、簡単に言えば、仮想 DOM 上に実装されており、仮想 DOM のアクセラレータであり、パフォーマンスを向上させるための魔法の武器です。

オリジナルの差分アルゴリズム

オリジナルの差分アルゴリズムは実際にはトラバーサル ループ比較です。ここでは図は描きません。簡単に言うと、これは非常に重要です。すべて、必ず確認してください。 diff アルゴリズムが何であるかを理解する必要があります。そして、vue と React の差分アルゴリズムを最適化する方法を理解する必要があります。

元の差分アルゴリズムは 2 つの仮想 DOM ツリーであり、1 つずつ比較されます。階層化されていない、つまり仮想 DOM ツリーの場合、ルートノードからその後の枝に至るまでの各ノードを個別に取り出して、新たに生成されたノードと比較する必要がある、最も独創的な diff アルゴリズムです。 diff アルゴリズムは時間複素数です。次数は O(n ^3) ですが、それぞれを他の n と比較する場合、比較は n ^2 回完了する必要があるため、(n ^2) のように見えますが、実際にはそうではありません。比較後も、最適なノードを最適な場所に配置する方法を計算する必要があるため、O(n ^3) になります。実際、アルゴリズムの観点から見ると、元の差分アルゴリズムは機能的に問題を解決します。最初に比較してから、実際の dom ニーズに対処しますが、実際には、プロセスはより複雑で不格好になります。

最適化された diff アルゴリズム

実際、私が言いたいことはこれは vue と React の差分アルゴリズムであり、すべて最適化された差分アルゴリズムであり、同じ最適化ポイントを持っています。つまり、同じレベルの比較であり、クロスレベルの比較はありません。

つまり、私たちの分析では、実際のWeb 表示、非類似 同じレベル内のノードの移動は非常に少ないため、同じレベルの比較を行うことにします

同じレベルの比較の説明は次のとおりです。同じレベル内のノードのみが比較されます。異なるレベルは比較されません。異なるレイヤーの場合は、元のノードを削除し、新しい更新されたノードを挿入するだけで済みます。

これはインターネットで見た画像です。私は絵を描くのが本当に怠けています。 . 侵害がある場合は、私に連絡してください. 削除するには私に連絡してください. 簡単に言うと、それは写真で言われていることです. ツリー構造は階層化されているため、新旧のツリー構造を比較できます. 比較後、実際のDOM 操作が実行されるため、データ変更にかかる全体的なコストが削減されます。リフローまたは再描画

Vue と React の差分アルゴリズムの違い

vue と React の diff アルゴリズムはどちらもクロスレベルの比較を無視し、リンゴ同士の比較のみを行います。 patch 関数は vue diff 中に呼び出され、パラメータは vnode と oldVnode で、それぞれ古いノードと新しいノードを表します。

vue はノードを比較します。ノード要素の型が同じでも className が異なる場合、異なる型の要素とみなされます。削除して再構築します。ただし、react は同じノードであるとみなします。ノード属性を入力して変更するだけです。

vue リスト比較では両端から中央への比較方法が使用されますが、react では左から右への比較方法が使用されます。コレクションが最後のノードを最初のノードに移動するだけの場合、React は前のノードを順番に移動しますが、Vue は最後のノードを最初のノードに移動するだけです。一般的に言えば、vue の比較方法の方が効率的です。

推奨される学習: 「react ビデオ チュートリアル 」

以上がReact と Vue の差分アルゴリズムの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。