Reactのdiffアルゴリズムの詳細な分析
Reactのdiffアルゴリズムの理解
仮想DOM
<div class="root" name="root">
<p>1</p>
<div>11</div>
</div>上記のノードとドキュメントを
{
タイプ: "div",
小道具: {
クラス名: "ルート"
名前: "ルート",
子供たち： [{
タイプ: "p",
小道具: {
子供たち： [{
タイプ: "テキスト",
小道具: {
テキスト 1"
}
}]
}
},{
タイプ: "div",
小道具: {
子供たち： [{
タイプ: "テキスト",
小道具: {
テキスト: "11"
}
}]
}
}]
}
}実際、
仮想DOMの操作とネイティブDOMの操作の比較ここではYoudaさんの言葉をそのまま引用します（回答は ネイティブDOM操作とフレームワークによってカプセル化された操作これは、パフォーマンス React の仮想 DOM に関する誤解
MVVM と仮想 DOM
ご覧のとおり、 パフォーマンスの比較は状況によっても異なりますパフォーマンスを比較する場合、初期レンダリング、小さなデータ更新、大きなデータ更新などのさまざまなシナリオを区別することが重要です。
要約する上記の比較は、主にフレームワーク開発者や研究者に参考資料を提供するためのものです。主流のフレームワーク 差分アルゴリズム
時間計算量まず、完全な 異なる戦略上で述べた
簡単に言えば:
比較後、いくつかの状況が発生し、対応する操作が実行されます。
分析する分析では補助的な役割を果たす
// react-reconciler/src/ReactChildFiber.js 行 1246
エクスポート関数 reconcileChildren(
現在の: ファイバー | null、
進行中: ファイバー、
次の子供: 任意、
renderExpirationTime: 有効期限、
）{
if (current === null) { // 最初のレンダリングで子ノードの `Fiber` インスタンスを作成します workInProgress.child = mountChildFibers(
進行中、
ヌル、
次に子供たち、
レンダリング有効期限、
);
} else { // それ以外の場合は `reconcileChildFibers` を呼び出して `diff` を実行します
workInProgress.child = 調整子ファイバー(
進行中、
現在の子、
次に子供たち、
レンダリング有効期限、
);
}
}
// react-reconciler/src/ReactChildFiber.js 行 1370
エクスポート const reconcileChildFibers = ChildReconciler(true);
エクスポート const mountChildFibers = ChildReconciler(false);
関数 ChildReconciler(shouldTrackSideEffects) {
// ...
関数deleteChild(){
// ...
}
関数useFiber(){
// ...
}
関数 placeChild(){
// ...
}
関数 placeSingleChild(){
// ...
}
関数 updateTextNode(){
// ...
}
関数 updateElement(){
// ...
}
関数 updatePortal(){
// ...
}
関数 updateFragment(){
// ...
}
関数createChild(){
// ...
}
関数 updateSlot(){
// ...
}
関数 updateFromMap(){
// ...
}
関数 warnOnInvalidKey(){
// ...
}
関数 reconcileChildrenArray(){
// ...
}
関数 reconcileChildrenIterator(){
// ...
}
関数 reconcileSingleTextNode(){
// ...
}
関数 reconcileSingleElement(){
// ...
}
関数 reconcileSinglePortal(){
// ...
}
関数 reconcileChildFibers(){
// ...
}
reconcileChildFibers を返します。
} まず、最も単純な
ノードの再利用には 2 つのケースがあります。最初のケースでは、
(currentFirstChild !== null && currentFirstChild.tag === HostText) の場合 {
// すでにノードが存在するので、それを更新して削除します
// 残り。
deleteRemainingChildren(returnFiber, currentFirstChild.sibling); // 兄弟を削除します。const existing = useFiber(currentFirstChild, textContent, expireTime);
既存の.return = returnFiber;
既存のものを返す; // 再利用 } 2 番目のケースでは、 // 既存の最初の子はテキストノードではないので、作成する必要があります // 既存のものを削除します。 // 新しい Fiber ノードを作成し、古いノードとその兄弟を削除します deleteRemainingChildren(returnFiber, currentFirstChild); const 作成 = createFiberFromText( テキストコンテンツ、 ファイバーモードを返す、 有効期限、 ); 次は
// react-reconciler/src/ReactChildFiber.js 行 1132
定数キー = 要素.キー;
子を現在の最初の子とします。
while (child !== null) {
// TODO: key === null かつ child.key === null の場合、これは次の場合にのみ適用されます。
// リストの最初の項目。
if (child.key === key) {
もし （
child.tag === フラグメント
? 要素タイプ === REACT_FRAGMENT_TYPE
: child.elementType === element.type ||
// このチェックをインラインで保持して、偽のパスでのみ実行されるようにします。
(__DEV__
? iscompatibleFamilyForHotReloading(子、要素)
： 間違い）
）{
deleteRemainingChildren(returnFiber, child.sibling); // 現在のノードにはノードが 1 つしかなく、古いノードには削除する必要がある兄弟ノードがあるため、冗長です。const existing = useFiber(
子供、
要素タイプ === REACT_FRAGMENT_TYPE
? 要素.props.children
: 要素.props、
有効期限、
);
existing.ref = coerceRef(returnFiber、child、element);
既存の.return = returnFiber;
// ...
既存のものを返します。
} それ以外 {
残りの子供を削除します(returnFiber、子供)。
壊す;
}
} それ以外 {
deleteChild(returnFiber, child); // 子から削除を開始する
}
child = child.sibling; // 子ノードから再利用可能なノードを探し続けます}次のステップは、再利用可能なノードが見つからないため、ノードを作成することです。Fragment
// react-reconciler/src/ReactChildFiber.js 行 1178
要素タイプ === REACT_FRAGMENT_TYPE の場合 {
const 作成 = createFiberFromFragment(
要素.props.children、
ファイバーモードを返す、
有効期限、
要素.キー、
);
作成された戻り値 = returnFiber;
戻り値が作成されました。
} それ以外 {
const 作成された = createFiberFromElement(
要素、
ファイバーモードを返す、
有効期限、
);
created.ref = coerceRef(returnFiber、currentFirstChild、要素);
作成された戻り値 = returnFiber;
戻り値が作成されました。
}
// react-reconciler/src/ReactChildFiber.js 行 756
関数 reconcileChildrenArray(
returnFiber: ファイバー、
currentFirstChild: ファイバー | null、
新しい子: 配列<*>,
有効期限: 有効期限、
): ファイバー | null {
// 機械翻訳コメント // ファイバー上にバックポインタがないため、このアルゴリズムは両端で検索して最適化することはできません。このモデルでどこまでできるか見てみたかったんです。トレードオフに価値がないことが判明した場合は、いつでも後で追加し直すことができます。
// デュアルエンドの最適化でも、変更が少ない場合に最適化し、マップを探すのではなく比較を強制します。前進モードでは、まずそのパスに到達するために探索を行い、かなり先を見る必要があることに気付いた場合にのみマップに移動します。これは、2 つの終了した検索と同様に反転を処理しませんが、これは珍しいことです。さらに、Iterable で両端の最適化を機能させるには、コレクション全体をコピーする必要があります。
// 最初の反復では、挿入/移動のたびに悪いケース (すべてをマップに追加する) が発生しました。
// このコードを変更する場合は、同じアルゴリズムを使用する reconcileChildrenIterator() も更新する必要があります。
oldFiber を currentFirstChild とします。
lastPlacedIndex = 0 とします。
newIdx = 0 とします。
nextOldFiber を null にします。
// 最初の for ループは、インデックスに従って新しいノードと古いノードを 1 つずつ比較します。新しいノードと古いノードが一致しない場合は、ループを終了し、終了時のノードと oldFiber ノードを記録します for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
if (oldFiber.index > newIdx) { // 位置が一致しません nextOldFiber = oldFiber; // 比較する次の古いノード oldFiber = null; // newFiber も null (再利用できない) の場合、現在の 1 対 1 の比較ループを終了します} else {
nextOldFiber = oldFiber.sibling; //通常、次のサイクルでは、兄弟ノードの値を取得し、それをoldFiberに割り当てます。
}
// // ノードが再利用できる（キー値が一致する）場合は、更新して新しいノードを返します。そうでない場合は、ノードが再利用できないことを示す null を返します。const newFiber = updateSlot( // ノードが再利用できるかどうかを判断します。returnFiber,
古いファイバー、
新しい子供[newIdx]、
有効期限、
);
// ノードを再利用してループから抜け出すことはできません if (newFiber === null) {
// TODO: これはnullの子のような空のスロットでは機能しません。
// 残念なことに、常にスローパスがトリガーされます。
// これがミスかnullかを伝えるより良い方法、
// ブール値、未定義など
（古いファイバーがnullの場合）{
oldFiber = nextOldFiber; // 再利用できないノードを記録して比較を終了します}
break; // ループを終了する }
if (shouldTrackSideEffects) {
// 既存のノードを再利用しない場合は、既存のノードを削除します if (oldFiber && newFiber.alternate === null) {
// スロットは一致しましたが、既存のファイバーを再利用しなかったため、
// 既存の子を削除する必要があります。
子を削除します(returnFiber、oldFiber);
}
}
// このトラバーサルは新しく追加されたノードを挿入済みとしてマークします lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
if (以前の新しいファイバー === null) {
// TODO: ループから抜け出します。これは最初の実行時にのみ発生します。
結果として得られるFirstChild = newFiber;
} それ以外 {
// TODO: このスロットの正しいインデックスにない場合は、兄弟を延期します。
// つまり、以前にnull値があった場合は、これを延期したいのです
// 各null値に対して。ただし、updateSlotを呼び出すことも望ましくありません。
// 前のものと一緒。
前のNewFiber.sibling = newFiber;
}
前のNewFiber = 新しいFiber;
oldFiber = nextOldFiber; // oldFiber を再割り当てしてトラバーサルを続行します}
// react-reconciler/src/ReactChildFiber.js 行 544
関数 updateSlot(
returnFiber: ファイバー、
oldFiber: ファイバー | null、
新しい子: 任意、
有効期限: 有効期限、
): ファイバー | null {
// キーが一致する場合はファイバーを更新し、それ以外の場合は null を返します。
const key = oldFiber !== null ? oldFiber.key : null;
if (typeof newChild === '文字列' || typeof newChild === '数値') {
// 新しいノードが文字列または数値の場合、キーはありません。
// 古いノードにキーがある場合は再利用できず、直接 null を返します。
// 古いノードのキーが null の場合、古いノードはテキストノードであることを意味するため、再利用できます。if (key !== null) {
null を返します。
}
updateTextNode() を返す
リターンファイバー、
古いファイバー、
'' + 新しい子、
有効期限、
);
}
// ...
null を返します。
}
// react-reconciler/src/ReactChildFiber.js 行 569
if (typeof newChild === 'object' && newChild !== null) {
スイッチ(newChild.$$typeof) {
case REACT_ELEMENT_TYPE: { // ReactElement
if (newChild.key === key) {
newChild.type === REACT_FRAGMENT_TYPE の場合 {
updateFragment() を返す
リターンファイバー、
古いファイバー、
新しい子.props.children、
有効期限、
鍵、
);
}
updateElement() を返す
リターンファイバー、
古いファイバー、
新しい子、
有効期限、
);
} それ以外 {
null を返します。
}
}
REACT_PORTAL_TYPEの場合: {
//updatePortalを呼び出す
// ...
}
}
if (isArray(newChild) || getIteratorFn(newChild)) {
(キー !== null) の場合 {
null を返します。
}
updateFragment() を返す
リターンファイバー、
古いファイバー、
新しい子、
有効期限、
ヌル、
);
}
}最初のトラバーサルに戻りましょう。トラバーサルが完了すると、古いノードがトラバースされたか、新しいノードがトラバースされたかの 2 つの状況が発生します。この時点で新しいノードをトラバースした場合、つまり更新するものがない場合は、通常、元の配列から要素が削除され、残りの古いノードが削除されることを意味します。最初のサイクルで古いノードが再利用されているが、新しいノードがある場合は、新しいノードが追加された可能性が非常に高くなります。この場合、残っている新しいノードに基づいて
// react-reconciler/src/ReactChildFiber.js 行 839
//新しいノードが更新され、冗長な古いノードを削除する場合（newIdx === newChildren.length）{
//新しい子供の終わりに到達しました。
leteremainingchildren（returnfiber、oldfiber）;
結果として結果を返します。
}
//新しいノードが更新され、冗長な古いノードを削除する場合（oldfiber === null）{
//既存の子供がもういない場合は、高速パスを選択できます
//残りはすべて挿入されるため。
for（; newidx <newChildren.length; newIdx ++）{
const newfiber = createchild（
returnfiber、
NewChildren [NewIdx]、
expirationtime、
);
if（newfiber === null）{
続く;
}
lastPlacedIndex = placeChild（newfiber、lastPlaceDindex、newIdx）;
if（forternewfiber === null）{
// TODO：ループから外れます。
結果firstchild = newFiber;
} それ以外 {
以前のnewfiber.sibling = newFiber;
}
以前のnewfiber = newFiber;
}
結果として結果を返します。
}次に、動きの場合にノードを再利用する方法、つまり、古い配列と新しい配列の両方がこの要素と位置が異なる場合、
// React-Reconciler/src/ReactChildFiber.js行872
//すべての子供をキーマップに追加して、すばやく検索します。
//既存のノードのキーまたはインデックスをOldFiber const const constから始まるマップ構造に追加します= mapRemainingChildren（returnfiber、oldfiber）;
//スキャンを続け、マップを使用して、削除されたアイテムを移動として復元します。
//比較されていない残りの新しいノードについては、キーまたはインデックスで古いノードのマップでそれらを1つずつ比較して、それらを再利用できるかどうかを確認します。
for（; newidx <newChildren.length; newIdx ++）{
//主に、新しいノードと古いノードのキーまたはインデックスが同じかどうかを確認し、再利用できるかどうかを確認します。
const newfiber = updatefrommap（
既存の子供、
returnfiber、
newidx、
NewChildren [NewIdx]、
expirationtime、
);
if（newFiber！== null）{
if（sextracksideEffects）{
if（newfiber.alternate！== null）{
//新しいファイバーは進行中の作業ですが、存在する場合
//現在、繊維を再利用する必要があります
//子リストからそれを削除に追加しないように
//リスト。
既存のchildren.delete（//マップ内の再使用ノードのキーまたはインデックスを削除する
newfiber.key === null？
);
}
}
lastPlacedIndex = placeChild（newfiber、lastPlaceDindex、newIdx）;
//更新されたNewFiber構造にNewFiberを追加します。
if（forternewfiber === null）{
結果firstchild = newFiber;
} それ以外 {
以前のnewfiber.sibling = newFiber;
}
以前のnewfiber = newFiber;
}
}
// React-Reconciler/src/ReactChildFiber.js行299
//古いノードと古いノードのキーまたはインデックスをマップ構造に保存して、キーまたはインデックス関数MapRemainingChildrenによって取得するのが便利です（
returnfiber：ファイバー、
CurrentFirstchild：繊維、
）：<文字列| fiber> {
//残りの子供を一時的なマップに追加して、
//キーはすぐにインデックスでこのセットに追加されます
// その代わり。
const既存の子供：map <string | fiber> = new Map（）;
既存のチャイルド= currentFirstchild;
while（既存のチャイルド！== null）{
if（既存のchild.key！== null）{
既存のChildren.set（既存のchild.key、既存のchild）;
} それ以外 {
既存のChildren.set（既存のchild.index、既存のチャイルド）;
}
既存のchild = expstinceChild.sibling;
}
既存の子供を返します。
}この時点で、新しい配列トラバーサルが完了します。つまり、同じレイヤーでの
毎日の質問 https://github.com/WindrunnerMax/EveryDay 参照する https://zhuanlan.zhihu.com/p/89363990 上記は、Reactのdiffアルゴリズムの詳細な分析です。 以下もご興味があるかもしれません:
|
<<: Linux サーバーに SSH パスワードなしでログインする方法
推薦する
Web スライスとは何ですか?
IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...
MySQL ストアド プロシージャの原理と使用法の詳細な説明
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
Navicatは機能ソリューション共有を作成できません
初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...
HTML5+CSS3コーディング標準
黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...
CSSクラス名の問題の詳細な説明
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
Vueデータ監視の原理の詳細な説明
<本文> <div id="ルート"> <h1&...
Html+CSS フローティング広告ストリップの実装
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
Echarts 凡例コンポーネントのプロパティとソース コード
凡例コンポーネントは、ECharts でよく使用されるコンポーネントです。シリーズ マーカーの名前を...
UbuntuでMySQLデータベースファイルディレクトリを変更する方法
序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...
Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません
#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...
JavaScriptの原理と方向性
これが何を指しているのかをどのように判断するのでしょうか? ①グローバル環境で呼び出された場合はwi...
MySQL ベースのストレージエンジンとログの説明 (包括的な説明)
1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...
Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)
ヒント: 以下の操作はすべて root 権限で実行されます。 # MySQL がインストールされてい...
CocosCreatorでリストを作成する方法
CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...
イベントバブリング、イベントキャプチャ、イベント委任に基づく詳細な説明
イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...