実務で通用するレベルになるReact講座 基礎編 仮想DOM

2024/06/02に公開

Reactの仮想DOMの解説

仮想DOMとは?

仮想DOMは、Reactが効率的にUIを更新するために使用する概念です。従来のDOM操作は、直接ブラウザのDOMを変更するため、操作が多いとパフォーマンスに悪影響を与える可能性があります。仮想DOMを使用すると、Reactは実際のDOMのコピーをメモリ上に作成し、変更があるたびにこのコピーを更新します。その後、実際のDOMと比較して差分(変更点)だけを効率的に更新します。

具体例とコード

例えば、カウンターアプリを考えてみましょう。ボタンをクリックするとカウンターの値が増加します。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
}

export default Counter;```


仕組みの解説
1初期レンダリング

初めてアプリをロードしたとき、仮想DOMに次のような構造が作られます。
<div>
  <p>カウント: 0</p>
  <button>カウントを増やす</button>
</div>

2状態の更新

ボタンをクリックすると、handleClick関数が呼ばれてcountの値が増加します。Reactは新しい仮想DOMを作成します。

<div>
  <p>カウント: 1</p>
  <button>カウントを増やす</button>
</div>


3差分の検出と更新

新しい仮想DOMと古い仮想DOMを比較し、変更された部分だけを実際のDOMに適用します。この場合、変更されたのは<p>要素のテキスト部分だけです。

初期状態
仮想DOM:                    実際のDOM:
┌────────────────┐        ┌────────────────┐
│ <div>          │        │ <div>          │
│   <p>カウント: 0</p>  │        │   <p>カウント: 0</p>  │
│   <button>     │        │   <button>     │
│     カウントを増やす  │        │     カウントを増やす  │
│   </button>    │        │   </button>    │
│ </div>         │        │ </div>         │
└────────────────┘        └────────────────┘

ボタンをクリック
新しい仮想DOM:               実際のDOM:
┌────────────────┐        ┌────────────────┐
│ <div>          │        │ <div>          │
│   <p>カウント: 1</p>  │        │   <p>カウント: 0</p>  │ ←ここが更新される
│   <button>     │        │   <button>     │
│     カウントを増やす  │        │     カウントを増やす  │
│   </button>    │        │   </button>    │
│ </div>         │        │ </div>         │
└────────────────┘        └────────────────┘

## 具体例とコード
例えば、カウンターアプリを考えてみましょう。ボタンをクリックするとカウンターの値が増加します。

Discussion