React のレベルアップ: React と React DOM アーキテクチャ

レベルアップリアクトシリーズについて

Level Up React は、React 開発者のスキル向上を支援することを目的とした一連の詳細な記事です。 React の内部メカニズム、ベスト プラクティス、設計パターン、高度な概念を探ります。これらの記事は、基本を超えて React が内部でどのように動作するかを真に理解したいと考えている React 開発者向けに書かれています。

シリーズの前の記事

1. React のレベルアップ: 宣言型プログラミングと命令型プログラミング
2. React のレベルアップ: React 要素を深く掘り下げる

導入

React は 2 つの個別のパッケージに分割されています。 react そして react-dom。この分離は単なる技術的な選択ではなく、特定のアーキテクチャのビジョンを反映しています。これらのパッケージとその役割を詳しく見てみましょう。

React: コアシステム

の react パッケージには、React アプリケーションとは何かを定義する基本ロジックが含まれています。コンポーネント、要素、アプリケーションの状態の作成と管理を処理します。

具体的には、このパッケージは以下を管理します。

• React 要素 (有名な Virtual DOM) の作成
• コンポーネントシステムの管理
• フックとその内部ロジック
• コンポーネントの状態管理
• コンテキストシステム
• 参考文献（リファレンス）

の react パッケージはプラットフォームに依存しません。つまり、プラットフォーム固有のコードは含まれていません。これにより、React を Web、モバイル、またはデスクトップ アプリケーションで使用できるようになります。

React DOM: ブラウザブリッジ

React DOM は Web 向けに特別に構築されています。その役割は、React の仮想世界を実際のブラウザ DOM に接続することです。 React 命令を実際の DOM 変更に変換します。

その主な責任は次のとおりです。

• 初期 DOM レンダリングの管理
• 状態が変化したときに DOM を効率的に更新する
• ブラウザイベントの処理
• レンダリングパフォーマンスの最適化

React DOM は、リコンサイラーと呼ばれる高度な DOM 更新システムを使用します。このシステムは、現在の DOM 状態を新しい React 命令と比較して、必要な変更を最小限に抑えます。

なぜ 2 つのパッケージがあるのでしょうか?

このアーキテクチャの分割により、次のような大きな利点が得られます。

1. 携帯性
   React のコアはさまざまなレンダラで動作できます。実際の例を次に示します。

// For web with React DOM
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(App />);

// For mobile with React Native
import { AppRegistry } from "react-native";
AppRegistry.registerComponent("App", () => App);

// The same component can be used in both cases
function App() {
  return (
    View>
      Text>Hello WorldText>
    View>
  );
}

2. 維持と進化
   各パッケージは独立して進化できます。 React でフックが実装される方法は次のとおりです。

// In React package - State management
function useState(initialState) {
  // Internal state management logic
  return [state, setState];
}

// In React DOM - DOM updates
function commitRootImpl(root, renderPriorityLevel) {
  // DOM update logic
}

3. サイズと性能
   この分割は、パッケージ サイズの最適化に役立ちます。モバイル プラットフォームでは、React DOM のコードは必要ありません。

転移せずに反応する

興味深い機能の 1 つは、JSX なしで React を使用できることです。 createElement のみを使用してコンポーネントを作成する方法は次のとおりです。

const { createElement, useState } = React;

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

  return createElement("div", null, [
    createElement("p", null, `Counter: ${count}`),
    createElement(
      "button",
      {
        onClick: () => setCount(count + 1),
      },
      "Increment"
    ),
    createElement(
      "button",
      {
        onClick: () => setCount(count - 1),
      },
      "Decrement"
    ),
  ]);
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(createElement(Counter));

正直に言うと、これは非常に冗長なコードです。 😅 JSX でも同じことができます (ああ、見た目はずっと楽です):

function Counter() {
  const [count, setCount] = useState(0);
  return (
    div>
      p>Counter: {count}p>
      button onClick={() => setCount(count + 1)}>Incrementbutton>
      button onClick={() => setCount(count - 1)}>Decrementbutton>
    div>
  );
}

結論

この 2 つのパッケージ アーキテクチャは、優れた設計によってコードがいかに柔軟で保守しやすくなるかを示しています。これにより、コードベースの一貫性と最適化を維持しながら、React がさまざまな環境で動作できるようになります。

重要なポイント:

• React は何をすべきかを決定する脳です
• React DOM は、ブラウザーでこれらの決定を実行する手です
• この分割により、React が異なるプラットフォームで動作できるようになります
• プラットフォーム固有の最適化が可能になります
• 最新の開発では、サーバー コンポーネントやストリーミングなどの高度な機能をサポートします。

このアーキテクチャは React 19 以降でも成長し続け、React を成功に導いたシンプルさと柔軟性を維持しながら、開発者にさらなる可能性を提供します。