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

これは

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

ガイドのリンク

ja.reactjs.org

差分検出処理

差分アルゴリズム

同じ型の DOM 要素

同じ型の2つのReactDOM要素を比較した場合、Reactはそれぞれの属性を調べ、対応する共通のDOMノードを保持し、変更された属性のみを更新する。

// このような二つの要素をReactが見た場合、classNameを更新すればよいことがわかる
<div className="before" title="stuff" />

<div className="after" title="stuff" />

styleを更新した場合はReactはプロパティのみを更新すればよいことがわかる。
また2 つの要素を変換する場合、React は fontWeight ではなく color のみを変更すればよいことがわかる。

DOMノードを処理した場合Reactは子に対して再帰的に処理を行う。

今日はここまで。