🎉

React DOM操作 レンダリング

2023/10/09に公開

はじめに

最近業務で React を触るようになったので基本的なことをアウトプットすることを目的として書きました。

目次

  • DOM 仮想DOM の違い
  • レンダリングのタイミング

DOM 仮想DOM の違い

DOMは、Webページ上のHTMLまたはXMLドキュメントの構造化されたもので以下の図のようにHTMLがツリー構造になっているのが特徴です。

Wiki 画像引用

DOM 操作

DOM(Document Object Model)操作とは、ウェブページ上のHTMLやXMLドキュメントの構造、内容、属性、スタイルなどをプログラムから動的に変更するプロセスを指します。これにより、ページのコンテンツや挙動をユーザーのインタラクションに応じてリアルタイムで変更することができます。
具体的には、上記の画像の TD 要素を Javascript を用いて色を黒から赤にすることです。このときDOMが再構築され、ブラウザに表示されます。

仮想 DOM

従来では一箇所 DOM 操作を行うだけでも全部のDOM を再構築刷る必要がありました。そこでReact では仮想DOMというものが使われるようになりました。しかし、それだと処理に時間がかかり表示に時間がかかってしまいます。そこで仮想DOMというものが使われるようになりました。仮想DOM は元のDOM との差分を検知してその検知した差分だけを反映させてDOMの再構築を行うものであり、再構築の時間が短縮されます。

React レンダリング

ここから React のレンダリングについて纏めていきたいと思います。DOM 操作とつながる話なので、上記の内容を理解しておくと内容が理解しやすいと思います。

レンダリングの流れ

のレンダリングの流れについて説明していきます。react のレンダリングの流れには3つのステップがあります。初心者用にわかりやすくシンプルにまとめているので、気になる場合はもっと調べてみてください。

  • レンダリングのトリガーが走り
  • 元々のDOM と変更後のDOM の差分を検出する
  • 検出し差分があるときにDOM の変更を行う

レンダリングのタイミング

レンダリングのタイミングを意識してコーディングができるようになると無駄なレンダリングを防ぎ、パフォーマンスを向上させることができます。

  • コンポーネントの初回レンダリング時
  • 親コンポーネントがレンダリングされた時すべての子コンポーネントは無条件にレンダリングされる
  • コンポーネント内で定義されたuseState()の状態変数/現在の値に変化があった時

余談

React のパフォーマンスを上げるにはこのレンダリング処理を最小限に抑えること、再計算をなるべく少なくすることが大事です。そのためにレンダリングをする必要がない部分にはuseMemo useCallback useCallback などを使用します。この詳しい説明は別の記事で解説します。

Discussion