Reactガイドを読んでいくその83

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

差分検出処理

差分アルゴリズム

子要素の再帰的な処理

DOMノードの子に対して再帰的に処理を行う場合、デフォルトでは両方の子要素のリストのそれぞれ最初から同時に処理を行っていって、差分を見つけたところで毎回更新を発生させる。

子ノードの最後にひとつ要素を追加するような場合、以下の 2 つのツリー間の変換はうまく動作する。

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React は 2 つの

  • first
    • ツリーを一致させ、2 つの
  • second
    • ツリーを一致させ、最後に
  • third
    • ツリーを挿入する。

    今日はここまで。