レンダリングと描画の違いを整理する
2020/09/12
はじめに
レンダリングと描画を同じ意味で使っていませんか？ 会話などカジュアルな場合には気にする必要はありませんが、厳密には違うので整理して理解しましょう！！
DOM の種類
DOM はリアル DOM と仮想 DOM があります。 また、そもそも DOM とは HTML を操作するための API です。 DOM の紹介
-
リアル DOM
- 実際に表示されている DOM
- 変更すると画面がそのまま変わる
- 変更しようとする場合、負荷が大きい処理になる
-
VDOM
- 単なるデータ
- 変更しても画面が変更されない
- 負荷が小さい処理で変更できる
レンダリングとは
state(props)変更前の VDOM と変更後の差分を比較し、差分を検知することで VDOM を再構築すること
レンダリングフロー
- 変更前と変更後の差分を比較するための仮想 DOM を二つ用意する
- 変更を反映させるため、VDOM を Javascript で操作(一般的にリアル DOM を操作するより速い)
- 変更前と変更後の VDOM の差分を比較
- 差分だけをリアル DOM に反映する
リアル DOM を操作するよりなぜ早いか
-
DOM を操作するより負荷の小さい処理だから
- jQuery などを使用して DOM 操作を行う場合、関係のないところも再描画されるから
-
変更前の VDOM と変更後の VDOM の差分のみを反映させるから
- 「差分のみ」というのがキモです
描画とは
上記レンダリングフローで反映されたリアル DOM をブラウザに表示させること
再描画のタイミング
- 関数が再生成された時
- 変数が再生成された時
- state の変更があった時
- 親コンポーネントが再描画された時
- 親コンポーネントから引き渡されている props が変化した時
- コンポーネント内で useState で定義している変数が変化した時
- カスタムフックより受け取っている変数が変化した時
React.memo,useCallback などを使用することで、無駄な再レンダリングを防ぐことができます。 無駄な再レンダリングを防ぐことで、パフォーマンス向上につながります。