仮想 DOM ってなんやねん？

[mayukoooo]

LT

[mayukoooo]

DOM とは？

---

• HTML要素を構造化して表現したもの
• ブラウザがレンダリングするもの（ユーザーに表示される）

[fyi]

• ブラウザレンダリングの仕組み

[mayukoooo]

仮想 DOM とは

---

• 効率的に UI の更新を管理するための概念
• DOM のインメモリー表現（実 DOM の軽量コピーみたいなもの）
  • 設計図のようなもので、レイアウトを直接変更する力はない
  • 画面に何も描画されないので速い
• 目的

CSSの再計算やレイアウトの変更には複雑なアルゴリズムが必要で、パフォーマンスに影響する。そこでReactは、仮想DOMと呼ばれるものを利用することで、この問題に対処するための異なるアプローチを持っている。

[mayukoooo]

どのように機能するのか

---

1. 仮想 DOM の構築

• renderメソッドが呼ばれると、React は仮想 DOM ツリーを構築する。
• この仮想 DOM は JavaScript オブジェクトのツリーとして表現される。

2. state と props の変更

• 仮想 DOM 内で影響を受けるコンポーネントを再レンダリングする。
• この変更は、実際の DOM にすぐに影響を与えることはない。

3. 差分検知

• diff アルゴリズムを使用して、仮想 DOM の現在のバージョンを以前のバージョンと比較する。

4. 実 DOM の更新

• 検出された差分を基に、更新が必要な実 DOM の部分のみが変更される。この選択的な更新は、迅速でパフォーマンスも高い。

[mayukoooo]

[fyi]

• ReactJS Virtual DOM