ブログ:
https://in-thepink.com/rendering/
はじめに
レンダリングと描画を同じ意味で使っていませんか？
会話などカジュアルな場合には気にする必要はありませんが、厳密には違うので整理して理解しましょう！！
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などを使用することで、無駄な再レンダリングを防ぐことができます。
無駄な再レンダリングを防ぐことで、パフォーマンス向上につながります。