差分アルゴリズム
ルートのDOM要素が異なる場合は、古いツリーを破棄して、新しいツリーを作成する
この時、compoentWillUnmountが呼ばれる
その時存在していたstateは破棄される
code: Sample.jsx
<div> // ルート要素
<Counter />
</div>
<span> // ルート要素
<Counter /> // Counter component の state は破棄される(初期化される)
</span>
同じ型のDOM要素の場合は、propsを比較して新しいものだけを変更する
これを再帰的に繰り返していく
code: Sample.jsx
// old
<div className="old" title="title"/>
// new
<div className="new" title="title" /> // classNameだけを新しいものに更新する
// old
<div style={{backgroundcColor: "red", color: "white"}}/>
// new
<div style={{backgroundcColor: "blue", color: "white"}}/> // style の backgroundColor のみを更新する
リスト型で値を追加したりするような要素にはkeyをつけることで更新を高速化している