https://qiita.com/marumaru0113/items/7f65441db1ff8dacb94b

経緯

DOMについて調べてた時に気づいたので、備忘録として。 （この備忘録ではReactベースで書いてます）

結論

仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。

命令的UIと宣言的UIってなんだろう...

「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある

const checkbox = document.querySelector(".checkbox");

const button = document.querySelector(".button");

checkbox.addEventListener("click", () => {
  if (checkbox.checked === true) {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
});

状態に応じて何を行うかは問わず、「この状態であればこのように表示する」ということをあらかじめ宣言しておく。

<button disabled={is_checked ? true : false}>ボタン</button>

宣言的UIにするメリット

• 状態に応じて求めているUI表示を一緒にしているので、一目で把握できる
• 圧倒的にコード量が減らせる

Reactでの仮想DOM

React公式 「差分検出処理」

あるツリーを別のものに変換するための最小限の操作を求めるというアルゴリズム問題については、いくつかの一般的な解決方法が存在しています。しかし、最新のアルゴリズムでもツリーの要素数を n として O(n3) ほどの計算量があります。

単純にツリーの変換を行おうとすると、現実的でない時間がかかってしまう。そこで、Reactは次の仮説を立てた上で、計算量を現実的なものとするアルゴリズムを作成している。このアルゴリズムの要となるのが、仮想DOM。

1.異なる型の 2 つの要素は異なるツリーを生成する。 2.開発者は key プロパティを与えることで、異なるレンダー間でどの子要素が変化しない可能性があるのかについてヒントを出すことができる。

Reactは変更を検知した際に、「変更前の仮想DOM」と「変更後の仮想DOM」の差分を実DOMに反映することで、効率的にUIの変更を反映してくれる。 このようにすることで、今までjQueryで命令的に一部の要素を変更していた実装を、宣言的に実装することが可能となる。