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

2 min読了の目安(約1300字TECH技術記事

ブログ:
https://in-thepink.com/rendering/

はじめに

レンダリングと描画を同じ意味で使っていませんか?
会話などカジュアルな場合には気にする必要はありませんが、厳密には違うので整理して理解しましょう!!

DOMの種類

DOMはリアルDOMと仮想DOMがあります。
また、そもそもDOMとはHTMLを操作するためのAPIです。
DOMの紹介

  • リアルDOM
    • 実際に表示されているDOM
    • 変更すると画面がそのまま変わる
    • 変更しようとする場合、負荷が大きい処理になる
  • VDOM
    • 単なるデータ
    • 変更しても画面が変更されない
    • 負荷が小さい処理で変更できる

レンダリングとは

state(props)変更前のVDOMと変更後の差分を比較し、差分を検知することでVDOMを再構築すること

レンダリングフロー

  1. 変更前と変更後の差分を比較するための仮想DOMを二つ用意する
  2. 変更を反映させるため、VDOMをJavascriptで操作(一般的にリアルDOMを操作するより速い)
  3. 変更前と変更後のVDOMの差分を比較
  4. 差分だけをリアルDOMに反映する

リアルDOMを操作するよりなぜ早いか

  • DOMを操作するより負荷の小さい処理だから
    • jQueryなどを使用してDOM操作を行う場合、関係のないところも再描画されるから
  • 変更前のVDOMと変更後のVDOMの差分のみを反映させるから
    • 「差分のみ」というのがキモです

描画とは

上記レンダリングフローで反映されたリアルDOMをブラウザに表示させること

再描画のタイミング

  • 関数が再生成された時
  • 変数が再生成された時
  • stateの変更があった時
  • 親コンポーネントが再描画された時
  • 親コンポーネントから引き渡されているpropsが変化した時
  • コンポーネント内でuseStateで定義している変数が変化した時
  • カスタムフックより受け取っている変数が変化した時

React.memo,useCallbackなどを使用することで、無駄な再レンダリングを防ぐことができます。
無駄な再レンダリングを防ぐことで、パフォーマンス向上につながります。

figmaのパフォーマンス向上についての記事

参考