ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

Reactの仮想DOMについて調べてみた。

React

仮想DOM(VDOM)とは

 メモリ上に保持された仮想なUIが、ReactDOMなどのライブラリによって実際のDOMと同期されるプログラミング上の概念である。仮想DOMの場合、実際のDOMはメモリ上に保持された仮想なUIとの差分を基に更新が行われる(差分検出処理)。
 仮想DOMがあることにより、宣言的APIが可能になる。仮想DOMは特定の技術ではない。私がこれまで持っていた仮想DOMのイメージは、「メモリ上に保持された仮想なUI(DOM)そのもの」であったが、これは少し間違いである。

差分検出処理について

 DOMツリーの差分検出において、全てのDOMの比較を行ってしまっては必然的に計算量が膨大となる。そこで、Reactは次の2つの仮定に基づき、O(n)程度のアルゴリズムでの差分検出を行っている。

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

 上記の仮定に合致しない場合、パフォーマンスの低下につながる。(ほとんどの場合合致するので、心配する必要はない。)

  1. よく似た出力を行う2つのコンポーネントの型を入れ替えている場合、同じ型にしたほうが良い。(現実的にこれが問題になったことはないらしい。)
  2. 不安定なkey(例えば乱数を用いたkey)はコンポーネントのインスタンスとDOMノードを不必要に再生成させる。

References