Reactの「diffing」ヒューリスティックアルゴリズムの背後にある動機は何ですか?

デニス・ヴァッシュ

私の質問は、ヒューリスティックなO(n)アルゴリズムを実装する動機についてです

あるツリーを別のツリーに変換するための最小数の操作を生成するというこのアルゴリズムの問​​題には、いくつかの一般的な解決策があります。ただし、最先端のアルゴリズムには、O(n ^ 3)のオーダーの複雑さがあります。ここで、nはツリー内の要素の数です。

  • あるツリーを別のツリーに変換すると、複雑さがO(n ^ 3)になるのはなぜですか?

これをReactで使用した場合、1000個の要素を表示するには、10億のオーダーの比較が必要になります。これは高すぎる。代わりに、Reactは2つの仮定に基づいてヒューリスティックなO(n)アルゴリズムを実装します。

  • 異なるタイプの2つの要素は、異なるツリーを生成します。
  • 開発者は、キープロップを使用して、さまざまなレンダリングでどの子要素が安定しているのかを示唆できます。
  • Reactの実装におけるヒューリスティックと何かについて詳しく説明できますか?
  • 仮定は平均的な場合にそれをO(n)にしますか?
マット・ティマーマンズ

Reactのdiffアルゴリズムが現状のままであるのにはかなりの理由がありますが、文書化された「動機付け」は、本当の真実であるために十分に意味がありません。

まず、最適な「ツリー差分」にO(N 3)時間がかかることは確かですが、「ツリー差分」アルゴリズムは、Reactが実際に行うことの唯一の最良の代替手段ではなく、実際、reactの意志に実際には適合しません。レンダリングプロセス。これは主に、最悪の場合、reactコンポーネントをレンダリングすると、既存のコンポーネントのリストと照合する必要があるreact要素のリスト(ツリーではない)が生成されるためです。

新しい要素の子がレンダリングされる前に新しいリストを既存のツリーと照合する必要があるため、差分が実行されるときに新しいツリーはありません実際、diffの結果は、子を再レンダリングするかどうかを決定するために必要です。

したがって...これらのリストを照合する際に、React diffを標準の最長共通部分列アルゴリズム(O(N 2)アルゴリズム)と比較する場合があります。それはまだかなり遅いです、そしてなされるべきパフォーマンスの議論があります。LCSがReactdiffと同じくらい高速である場合、それは確実にレンダリングプロセスに位置付けられます。

しかし、LCSの種類が遅いだけでなく、正しいことしませんReactが新しい要素のリストを古いツリーと照合しているとき、各要素が新しいコンポーネントであるか、既存のコンポーネントへの単なる小道具の更新であるかを決定しています。LCSは要素タイプの可能な最大の一致を見つけることができますが、可能な最大の一致は必ずしも開発者が望んでいるものではありません

したがって、LCS(または本当に要点を押したい場合はツリー差分)の問題は、それが遅いというだけでなく、遅いということであり、それが提供する答えは、開発者の意図を推測するだけです遅いアルゴリズムは、それでも間違いを犯す場合、それだけの価値はありません。

React開発者が使用できたであろう、ほとんどの場合より正確な高速アルゴリズムは他にもたくさんありますが、問題は「それだけの価値があるか」です。一般に、答えは「いいえ」です。なぜなら、開発者の意図を推測するのに本当に良い仕事をするアルゴリズムはなく、開発者の意図を推測することは実際には必要ないからです。

開発者にとって、新しい要素を既存のコンポーネントと適切に一致させて再レンダリングする必要がないことが重要な場合、開発者はこれが当てはまること確認する必要があります。それは非常に簡単です-彼はリストをレンダリングするときに重要な小道具を提供する必要があります。開発者は、リストをレンダリングするときにほとんど常にこれを行う必要があります。これにより、コンポーネントのマッチングが完全になり、推測に甘んじる必要がなくなります。

マッチングを明確にするために必要な場所にキープロップを配置しない場合、Reactは警告を生成します。これは、より良い差分よりもはるかに役立ちます。それが表示されたら、適切なキー小道具を追加してコンポーネントを修正する必要があります。そうすれば、マッチングは完全になり、不適切に記述されたコンポーネントでより良い仕事をすることができる他のアルゴリズムがあるかどうかは関係ありません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Cassandraのトークン関数の背後にあるアルゴリズムは何ですか?

分類Dev

Rasa NLUの背後にあるアルゴリズムは何ですか?

分類Dev

Random.next()の背後にあるアルゴリズムは何ですか?

分類Dev

Random.next()の背後にあるアルゴリズムは何ですか?

分類Dev

groupBy + countのヒューリスティックアルゴリズムはありますか?

分類Dev

Photoshopの「白黒」調整レイヤーの背後にあるアルゴリズムは何ですか?

分類Dev

C ++の静的ポリモーフィズムの背後にある動機は何ですか?

分類Dev

ホワイトバランスアルゴリズムの背後にある数学は何ですか?

分類Dev

PDFクラウドアノテーションの背後にあるアルゴリズムは何ですか?

分類Dev

Rコアの `split`関数の背後にあるアルゴリズムは何ですか?

分類Dev

JavaのMath.pow()の背後にあるアルゴリズムは何ですか

分類Dev

Linuxのfactorコマンドの背後にあるアルゴリズムは何ですか?

分類Dev

GROUP USING'collected 'および' merge 'の背後にあるアルゴリズムは何ですか

分類Dev

選択範囲の gimp フェザー エッジの背後にあるアルゴリズムは何ですか?

分類Dev

確率的アルゴリズムとヒューリスティックアルゴリズムの違い

分類Dev

フォトショップパレットナイフ効果の背後にあるアルゴリズムは何ですか?

分類Dev

A *アルゴリズムのヒューリスティック値

分類Dev

対角ヒューリスティックを使用したA *アルゴリズムの奇妙な動作

分類Dev

MiniZincにヒューリスティックアルゴリズムを組み込むにはどうすればよいですか?

分類Dev

再帰的アルゴリズムをカバーするチェッカーボードの背後にある直感は何ですか?また、そのようなアルゴリズムの定式化をどのように上手く行うことができますか?

分類Dev

n個のクイーン(n> 1000)の高速ヒューリスティックアルゴリズム

分類Dev

アルゴリズムの背後にある数学の説明

分類Dev

プルリクエストによってフォークがアップストリームの背後にあるのはなぜですか?

分類Dev

修正されたガーウィックのアルゴリズムとは正確には何ですか?

分類Dev

スピードバックアルゴリズムを実装するのに役立つ機能的な方法は何ですか?

分類Dev

Math.logの背後にあるアルゴリズム-Java

分類Dev

std :: seed_seqの背後にあるアルゴリズムは定義されていますか?

分類Dev

スターアルゴリズム:距離ヒューリスティック

分類Dev

z3ソルバーの背後にあるアルゴリズム

Related 関連記事

  1. 1

    Cassandraのトークン関数の背後にあるアルゴリズムは何ですか?

  2. 2

    Rasa NLUの背後にあるアルゴリズムは何ですか?

  3. 3

    Random.next()の背後にあるアルゴリズムは何ですか?

  4. 4

    Random.next()の背後にあるアルゴリズムは何ですか?

  5. 5

    groupBy + countのヒューリスティックアルゴリズムはありますか?

  6. 6

    Photoshopの「白黒」調整レイヤーの背後にあるアルゴリズムは何ですか?

  7. 7

    C ++の静的ポリモーフィズムの背後にある動機は何ですか?

  8. 8

    ホワイトバランスアルゴリズムの背後にある数学は何ですか?

  9. 9

    PDFクラウドアノテーションの背後にあるアルゴリズムは何ですか?

  10. 10

    Rコアの `split`関数の背後にあるアルゴリズムは何ですか?

  11. 11

    JavaのMath.pow()の背後にあるアルゴリズムは何ですか

  12. 12

    Linuxのfactorコマンドの背後にあるアルゴリズムは何ですか?

  13. 13

    GROUP USING'collected 'および' merge 'の背後にあるアルゴリズムは何ですか

  14. 14

    選択範囲の gimp フェザー エッジの背後にあるアルゴリズムは何ですか?

  15. 15

    確率的アルゴリズムとヒューリスティックアルゴリズムの違い

  16. 16

    フォトショップパレットナイフ効果の背後にあるアルゴリズムは何ですか?

  17. 17

    A *アルゴリズムのヒューリスティック値

  18. 18

    対角ヒューリスティックを使用したA *アルゴリズムの奇妙な動作

  19. 19

    MiniZincにヒューリスティックアルゴリズムを組み込むにはどうすればよいですか?

  20. 20

    再帰的アルゴリズムをカバーするチェッカーボードの背後にある直感は何ですか?また、そのようなアルゴリズムの定式化をどのように上手く行うことができますか?

  21. 21

    n個のクイーン(n> 1000)の高速ヒューリスティックアルゴリズム

  22. 22

    アルゴリズムの背後にある数学の説明

  23. 23

    プルリクエストによってフォークがアップストリームの背後にあるのはなぜですか?

  24. 24

    修正されたガーウィックのアルゴリズムとは正確には何ですか?

  25. 25

    スピードバックアルゴリズムを実装するのに役立つ機能的な方法は何ですか?

  26. 26

    Math.logの背後にあるアルゴリズム-Java

  27. 27

    std :: seed_seqの背後にあるアルゴリズムは定義されていますか?

  28. 28

    スターアルゴリズム:距離ヒューリスティック

  29. 29

    z3ソルバーの背後にあるアルゴリズム

ホットタグ

アーカイブ