Reactのレンダリングと描画の違いを整理する

DOMの種類 DOMはリアルDOMと仮想DOMがあります。 また、そもそもDOMとはHTMLを操作するためのAPIです。 DOMの紹介 リアルDOM 実際に表示されているDOM 変更すると画面がそのまま変わる 変更しようとする場合、負荷が大きい処理になる VDOM 単なるデータ 変更しても画面が変更されない 負荷が小さい処理で変更できる レンダリングとは state(props)変更前のVDOMと変更後の差分を比較し、差分を検知することでVDOMを再構築すること レンダリングフロー 変更前と変更後の差分を比較するための仮想DOMを二つ用意する 変更を反映させるため、VDOMをJavascriptで操作(一般的にリアルDOMを操作するより速い) 変更前と変更後のVDOMの差分を比較 差分だけをリアルDOMに反映する リアルDOMを操作するよりなぜ早いか DOMを操作するより負荷の小さい処理だ