Reactの画面描画(render)の仕組みについて

reactでどのようにしてコンポーネントを画面に表示し、
更新しているのかを色々調べて見た結果をまとめる。

仮想DOMについて

reactでは仮想DOMを採用しているため
まずは仮想DOMの概念からまとめる。

そもそもDOMとは？

DOM（Document Object Model）とはHTMLではなくて、HTML/CSS/javascriptを解析して作成した
DOMツリーのこと。
Google ChromeデベロッパーツールのElementsタブで表示されるものがDOMツリー。

DOMツリーって？

HTMLを構築する木構造データのこと。プログラミング言語で操作できる。 javascriptで操作できるがjavascriptではない。 webページはDOMツリーを解析してwebページをレンダリングする 仮想DOMと区別して通常のDOMはリアルDOMと呼ばれる。

仮想DOMとは？

Reactにおける仮想DOMとは、情報を受け取ってもすぐにはブラウザの描画を行わず
まずはバーチャルなDOM（プログラム的に作成された仮のDOM）を構築することを指します。 そして実はこの仮想DOMとはjavascriptのオブジェクトでできている。

reactにおける仮想DOMの利用

Reactは仮想DOMを設計してからリアルDOMを作成するため、
従来のDOMやフレームワークで構築されたDOMに比べて処理のスピードが速く、
Webページの表示を高速で切り替えることができる。 reactでは下記のようなフローで仮想DOMを利用して画面を描画している。

1. 変更前仮想DOMを用意
2. 変更後仮想DOMを用意
3. 変更前仮想DOMと変更後仮想DOMを比較して変更箇所を見つける
4. 変更差分が存在した場合のみ、その部分だけをリアルDOMに反映する。

上記のように無駄のないDOM操作を行うことでページ表示の高速化を図っている。　　 リアルDOMを操作する場合はリアルDOMが変更されるたびにブラウザが HTMLを解析してレンダリングするのでコストが高い。

仮想DOMのメリット

通常のjavascriptでのリアルDOM操作に比べて仮想DOMを利用することのメリットを
実際に比較してみる

リアルDOMを操作する場合とreactで仮想DOMを利用する場合で比較

まずはjavascriptでリアルDOMを操作するパターンで書いてみる

リアルDOMの場合

Copy
<div id="app">
  <!-- ②の部分 　　 -->
  <p id="counter">0</p>
  <button type="button" id="increment">+1</button>    
</div>

<script>
// ②の部分
const state = { count: 0 };

// ①の部分
const btn = document.getElementById('increment');
// ③の部分
btn.addEventListener('click', () => {
  const counter = document.getElementById('counter');
  counter.innerText = ++state.count;
})
</script>

下記のようなデメリットがある

1. いちいち要素をJavascriptで取得(getElementById)してるからUIとロジックが混在
2. HTMLにもJavascriptにもカウンターの初期値が記載する必要があり冗長
3. UIとロジックを結びつけるためにわざわざリスナーを定義してる

reactで仮想DOMを利用する場合

上記をreactで書いてみる

Copy
import "./styles.css";
import { useState } from "react";

export default function App() {

  const [count,setCount] = useState(0)

  const increments = ()=>{
    setCount((prev)=>prev+1)
  }

  return (
    <div className="App">
      <p id="counter">{count}</p>
      <button type="button" onClick={increments} >+1</button>    
    </div>
  );
}

リアルDOMのデメリットが全て消える

1. javascriptの変数をそのままjsxで表示できる
2. カウンターはjavascriptのみで管理できる
3. jsx側のonClickで簡単にjavascriptの関数とつなげられる

参考

https://qiita.com/seira/items/6767e222890c9890ecb9 https://qiita.com/Gsann/items/e8ca34f5b7bdab4fde11

【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！

仮想DOMってすげーんだぜ！

reactの画面描画する仕組み

基本的にreactでは再レンダリングが起きるタイミングは以下の3つであり
この三つのタイミングで仮想DOMが作られ、差分をとり、リアルDOMに反映させることで 画面描画が行われる。

1. stateが更新された時
2. propsが更新された時
3. 親コンポーネントが再レンダリングされた時

参考

【React】再レンダリングの仕組みと最適化

用語

reactの仕組み関係で頻出する用語の意味をまとめておく。

レンダリングとは？

Reactにおけるレンダリングとは、現在のPropsとStateを元に、コンポーネントに対して、それらがどのように画面上に表示されるか、実際にDOMに変更を加える必要があるかどうかを知るために行われるプロセス。　　 Reactがレンダリングを行うのは、変更前と変更後の仮想DOMを構築し変更差分を検出することで、リアルDOMを構築する必要があるかどうかを知るための手段であり。変更差分がなければ、DOMの更新は行われない。　　

描画とは？

描画とは、レンダリングによって変更差分が見つかった場合に構築されたリアルDOMをブラウザに反映させることを指す。つまりReactがコンポーネントを再レンダリングしても、変更差分がなければ再描画されない 「レンダリング」の結果、変更差分があった場合「描画」される。
ただほとんど「レンダリング」= 「描画」使われているような気がする。

マウントとは？

Reactコンポーネントに対応するインスタンスとDOMノードを作成し、それらをDOMに挿入するこのプロセスは、マウントと呼ぶ。

まとめ

Reactで画面描画する仕組みと、その説明の際に使われる用語を
まとめてみた。

描画の仕組みの次はReactで使われるJSX記法について知りたいという方は
下記記事でJSX記法の要点をまとめているのでご参照ください！

【React】JSX記法の使い方

Gatsby製のブログを作成するにあたり、Reactで使うJSX記法の基本的なことを完全に主観で簡単にまとめておく。

参考

reactjs - React jsの「マウント」とは何ですか？