応答のアルゴリズムの方面(diffing、Heristic)


はんのう公式文書がよくできています.それでもアルゴリズムを見つけるために...原文を読む気持ちは一緒にしなければならない.リアクターは関数型コンポーネントを使用する傾向がありますが、正式なドキュメントには多くのクラスコンポーネントがあります.
反応式の見解ではないかもしれません.

diffing Algorithm


私たちの認識の違いは正しい.
要素を変更するたびにDOMが含まれる場合、パフォーマンスが低下する可能性があります.
したがって,reactionの仮想DOMが作成される.修正は仮想DOMに最初に適用され、その後修正は実際のDOMと比較され、修正は実際のDOMに適用されます.当時diffingアルゴリズムが用いられていた.現在、Fiberという名前にも良いアルゴリズムが使われています.

1.ルート要素のタイプが異なる



(右側は変更前のリアルdom)
既存の<div>要素を<section>に変更すると、parent要素からchild要素に変更されます.

2.エレメントが同じタイプの場合


同じタイプですが、いつ変わりますか?
classNameまたは属性を変更すると変更されます.

classNameが変更された場合(右側は変更前の実際のdom)
色のみ変更する場合は、真色属性のみ変更...😮 (右側は変更前のリアルdom)

3.子の再帰



(右側は変更前のリアルdom)
まず、親要素firstが同じであることを認識し、サブ要素を比較します.次に3つ目を追加します.
もし...
<ul>
  <li>first</li>
  <li>second</li>
</ul>
既存のドームにこのように描かれています
<ul>
  <li>third</li>
  <li>first</li>
  <li>second</li>
</ul>
このように前に追加したい場合は、効率的ではありません.(現在はそうではありません)

ソリューション:key


彼の解決策はKeyだ

keyのおかげで、2015をkey値とする要素を再描画する必要がなく、移動するだけであることがわかりました.
キー値を設定することが重要ですよね?(唯一のidを使用!)

Heuristic Algorithm


仮想ドメインですべての操作を実行すると、時間が非常に複雑になりますか?휴리스틱 알고리즘を用いて巡回する方法で彼に対する解答を得た.
Reference | The Diffing Algorithm
ラウンジ関連の内容は、ラウンジ公式ドキュメントから多くの情報を得ることができないため、個人ブログに取って代わられます.
解決方法が正しいかどうかの問題を排除し、経験と直観的な方法を通じて、通常は良い解決方法やより簡単な解決方法を探す方法である.추론 방식を使用しているそうです.
休後語の語源はユリカです.だから出てくる答えは最良の年ではないかもしれませんが、最良の年ではありません.そうでしたら.ベストイヤーになれないのが枝切りです.
最適な年ではないかもしれませんが、Huriticアルゴリズムを使用すると予測されるのは、速度が速いからです.これは私個人の考えです.

より速く適用されるアルゴリズムは何ですか?


There are a lot of other fast algorithms, though, that React developers could have used that would be more accurate in most cases, but then the question is "Is it worth it?"Generally, the answer is "no", because no algorithm can do a really good job of guessing a developer's intent, and guessing the developer's intent is actually not necessary.
ヒューマンアルゴリズム
無意味な行為と判断する.