これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
差分検出処理
差分アルゴリズム
同じ型の 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は子に対して再帰的に処理を行う。
今日はここまで。