React 仮想DOMに関しての認識

Question

Reactの仮想DOMに関して疑問があります！

仮想DOMのおかげで余計なレンダリングがなくなると聞いたのですが、
どういう意味かイマイチ理解できていません。

自分の解釈だとUIを構成しているとして、
変化があったコンポーネントが変化またはイベントハンドラーに反応してレンダリングが作動するというイメージで間違っていないでしょうか？

Answer 1

仮想DOMがない場合、DOMの「ここをこうする」という指示をすべてコードとして書く必要があります。

一方、仮想DOMで行う場合、「変更前の状態」と「変更後の状態」を作れば、フレームワーク側が必要なDOMの変更を行ってくれます。

結果的に、コードを書く側が何も考えなくても余計なDOM操作はフレームワーク側が吸収してくれることとなります（もっとも、極限までチューニングされるわけではないです）。

変化があったコンポーネントが変化またはイベントハンドラーに反応してレンダリングが作動するというイメージで間違っていないでしょうか？

いえ、仮想DOMの場合、全画面を再レンダリングする指示を行います。更新されていないところはフレームワーク側が再描画処理をカットするので、それでも実用になる、という話です。

Comments

[Kosuke0906]

凄い分かりやすいです！

確かにJavaScriptのDOM操作ではここをどうすると細かく書いていました。
変化を作ってあげればフレームワーク側でその処理をしてくれるってことなんですね！
面白いです！