仮想 DOM
そもそも #DOM とは
データ構造的には #木構造
#木構造 の状態遷移について
状態遷移前後の #木構造 を比較することでその差分を埋める操作を自動的に求めることができるはず
例:
前の状態 : <div class='foo'>aaa</div>
後の状態 : <div class='foo'>bbb</div>
検出される差分: foo の text の -aaa+bbb
差を埋める操作: document.querySelector(".foo").innerHTML = 'bbb'
#HTML の生成の元となる #木構造 は #DOM ( #HTML のインスタンス)でなくてもよい
#DOM と 1対1対応する単純な構造体で表現 -> #仮想_DOM
なぜ本物の #DOM ではなく、 #仮想_DOM を都度構築するのか
ユーザの「知るべきこと」「やるべきこと」を限定するため
#仮想_DOM の #アルゴリズム の詳細を知る必要はない
常にその時の完成形の DOM をプッシュする
これはまるで #HTTP リクエストに応じて #HTML が返却されるのと同じ！
常に完成形を宣言する -> 宣言的 UI と呼ぶ
#jQuery 手続型 UI の状態管理
手動の #DOM 管理は難しい！
状態が #JavaScript にあるのか、 #DOM 自体に持っているのかが曖昧
書いた当人の頭の中にはある -> 書いた当人市かわからない -> 書いた当人もわからない