差分アルゴリズムを反応させます

  反応する懸念が効率的にデータに基づいて、UIインターフェースをレンダリングする方法で、WebフロントエンドのUIライブラリです。仮想バインディングのDOMデフと効率的なアルゴリズムは、データが変更されたとき、真の変化のDOMを見つけるために、シンプルかつ効率的なアルゴリズムを通じてREACTよう、DOMは変化に応じてUIインターフェースをレンダリング同時に動作します。

  従来のツリー構造の別のツリー構造によれば、スイッチング動作は、複雑で時間のかかるプロセスであることを意味し、一般的に、時間複雑性Oを(N ^ 3)に達し、ノードに結合された各大DOMに含まれていますオブジェクト情報を、一般的なアルゴリズムは、リアルタイムデータを得るUIビューを更新するために応じて変更してもよいです。

  特定のシーンのDOMツリーに応じて反応し、我々は大規模かつ効率的な差分戦略を開発しました:

  モバイルでのクロスレベル1のWeb UIのDOMノードのオペレーティング小さく、無視することができます

  2.同様のタイプのアセンブリは、同じツリー構造を有し、異なるタイプのノードのツリー構造は、大型の確率と同じではありません

  ノードの同じレベル3.は、一意のIDによって識別することができます

  上記三点戦略によれば、点のみの同じレベルを比較するために、2つの数のDOMとを比較します。

  レベルを横切って移動があった場合、<1>、操作のみを作成および削除するために、衝撃の動作性能は、反応させ交差反応-DOMレベルの操作、開発コンポーネント、安定なDOM構造のために推奨されていない性能を助けますアップグレード、あなたは本当に、ノードを追加または削除しないで、CSSのノードを非表示にしたり、表示することができます。

  次のレベルのノードを継続し、そうでない場合はコンポーネントの同じタイプの比較に応じて、コンポーネントの同じタイプ、場合<2>には、同じタイプのために、新たなアセンブリの下に全体のアセンブリのすべてのサブコンポーネントを交換する、汚れたコンポーネントの決定されコンポーネントは、データをUIビューに応じて変更するかどうか要求されないことがあり、開発者は、コンポーネントを差分する必要があるかどうかshouldComponentUpdate(nextProps、nextState)によって判断反応可能

  <3>と同じレベルのサブアセンブリのための、唯一のdiffの効率を改善するためのキーの区別を追加することをお勧めします反応します。まず、一意のキーによって新しいノードトラバーサル操作は、作成、削除の必要性を特定し、ノードをシフトすることができます。古いシフト動作の存在下でのノードの同じセットは、削除する新しいノードのオーバーヘッドを回避する場合(オペレーションは、計算およびDOM含みます)。次のようにシフト演算アルゴリズムは次のとおりです。

  最も外側の0 // oldList内での現在の要素の前に記録素子のlastIndexの位置=を聞かせて  

  (newListの要素)のために{

     // element._mountIndexは、古いリストの現在の要素の位置であり、newIndexが、新しいリストの現在の要素の位置であります

       (element._mountIndex <lastIndexの)場合

      移動(要素、newIndexが)

    lastIndexの= Math.max(element._mountIndex、lastIndexの)

  }

     現在の戦略は、古いリスト内の要素を配置することである場合は、リスト内の古い要素の前に位置、それよりも小さい場合、それは現在の要素が新たにリストになるために戻って移動する必要が示しています。

  概要:差分アルゴリズムは、新しいツリーを構築し、UIの更新の効率を最適化するために、古いDOMツリーのための最小限の作業をするいくつかの変更の比率を見つけることではありません。

     

    参考:https://zhuanlan.zhihu.com/p/20346379

おすすめ

転載: www.cnblogs.com/wust-hy/p/11443335.html