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

2020/09/17に公開

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のパフォーマンス向上についての記事

参考

Discussion