React の仕組みを理解する

リアクトとは何ですか? ⚛️

React は、Web アプリケーションをより迅速かつ効率的に構築するのに役立つ JavaScript ライブラリ です。これにより、データの処理が向上し、シングル ページ アプリケーション (SPA) モデルを使用して動作します。これは簡潔な定義ですが、より包括的な定義がもう 1 つあります。

「React は、コンポーネントと状態を使用してユーザー インターフェイス (UI) を構築する、非常に人気のある JavaScript ライブラリ です。Facebook によって開発されました。」

- ヨナス・シュメットマン

注: ここからは、読者が React にある程度精通しているか、以前に React を使用した経験があることを前提とします。

リアクションはどのように機能するのでしょうか?

React は完全に コンポーネント の概念に基づいています。コンポーネントは、再利用できる UI の小さな部分です。次に、コードが画面に表示される UI にどのように変化するのかを見てみましょう。

コンポーネント → コンポーネント インスタンス → React 要素 → DOM 要素 → 画面上の UI

コンポーネントとは何かを理解したところで、実際に動作するコンポーネントのバージョンであるコンポーネント インスタンスについて詳しく見ていきましょう。基本的に、コンポーネントは設計図やテンプレートのようなものです。コンポーネントのインスタンスを作成するときは、props を渡し、それに特定の状態を割り当てます。これらのインスタンスは、React で扱うものです。

この概念をさらに詳しく知りたい場合は、Medium で 「React Components, Instances, and Elements」 を検索することをお勧めします。

さて、私の目標は、次に起こるプロセスを説明することです。

React 要素 → DOM 要素 → 画面上の UI

このプロセスは 4 つのフェーズで動作し、1 つずつ説明します。

1. レンダリングがトリガーされます
2. レンダリングフェーズ
3. コミットフェーズ
4. ブラウザペイント

1. レンダリングがトリガーされる

レンダリングは 2 つの場合にトリガーされます:

• 初期レンダリング: これは、アプリが初めてロードされたときに発生します。
• 状態更新 (再レンダリング): これは、アプリケーションに変更があった場合、通常は状態が変化した場合に発生します。

このフェーズでは特に何も起こらないので、次のフェーズに進みましょう。

2. レンダリングフェーズ

ここで、「レンダリング」の意味を再定義しましょう。フロントエンド開発者として、私たちは UI の変更を説明するために レンダリング という用語をよく使用します。しかし、それは完全に正確ではありません。 React でのレンダリングとは、次のフェーズに向けて UI を準備することを意味します。

レンダリング段階にはいくつかのステップが含まれます:

ステップ 1: 再レンダリングをトリガーしたコンポーネント インスタンス

これは、コンポーネントに変更が発生したことを React が検出したときです。

ステップ 2: 要素に反応

このステップには、プロジェクト内のすべてのコンポーネントを収集し、仮想 DOM ツリー と呼ばれるものを構築することが含まれます。このツリーは、コンポーネント間の関係を ノード として概説します。各 親 コンポーネントにはその 子 コンポーネントがあります。

ここで重要な点があります。親コンポーネントが変更されると、そのすべての子も再レンダリングされます。

この段階では、いくつかのことが同時に起こります:

• まず、React は仮想 DOM ツリーを作成します。
• 次に、Reconciler が介入します。これは、何が変更されたかを特定する役割を果たします。 React では、リコンサイラーは Fiber と呼ばれます。

Fiber について詳しく知りたい場合は、以下をチェックしてください。

• 「React Fiber とは何か、そしてそれが高パフォーマンスの React アプリケーションの構築にどのように役立つのか」 (Medium)。
• 「React Fiber を使用した高性能アプリケーションの構築」 (Dhiwise)。

食物繊維とは何ですか?

ファイバーは、コンポーネントの変更を調整する役割を担うエンジンです。何が変更され、何が削除され、何が追加されたのかがわかります。これは簡略化した説明ですが、Fiber にはいくつかの重要な概念が含まれます。

• 調整: 変更 (追加、更新、削除された DOM 要素) を特定します。
• Diffing: 現在の DOM と仮想 DOM を比較する、高度に最適化されたアルゴリズム。これは 2 つのルールに基づいて動作します。
  1. DOM 要素の型が変更された場合。
  2. 属性またはプロパティが変更された場合。

このアルゴリズムにより、操作が O(n³) から O(n) に高速化され、アプリのパフォーマンスが向上します。

• ファイバー ツリー: このツリーは、初期レンダリング中に作成されます。これは仮想 DOM ツリーを反映していますが、違いがあります。以下についての洞察が得られます。
  • 現在の状態
  • 小道具
  • 副作用
  • 使用済みフック
  • 作業キュー

レンダリング フェーズは非同期です。つまり、必要に応じて一時停止、再開、キャンセル、または優先順位付けを行うことができます。これにより、React はアプリの実行中に Fiber Tree を継続的に更新できるようになります。

このフェーズの最終結果は エフェクトのリスト であり、次のフェーズに渡されます。

3. コミットフェーズ

このフェーズでは、React はレンダリング フェーズで生成された エフェクトのリスト を取得し、これらの変更を DOM に適用します。これは、別のライブラリ ReactDOM によって処理されます。 ReactDOM は、React が識別した変更に基づいて実際の DOM を操作する責任があります。

重要な注意事項: React は UI 構造の作成を担当しますが、ReactDOM はブラウザー固有の操作を処理します。これは、異なるプラットフォーム (React Native など) では、React Native のような異なるライブラリが UI のレンダリング方法を管理することを意味します。

インターフェイスを部分的にレンダリングできないため、コミットフェーズは同期である必要があります。変更はすべて一度に適用する必要があります。

4.ブラウザペイント

この最後のステップは React の範囲外です。これには、ブラウザのレンダリング エンジンが画面への変更を描画することが含まれます。各ブラウザはこれを異なる方法で処理するため、ブラウザ固有のレンダリング プロセスを検討する価値があります。

ブラウザの仕組みに興味がある場合は、以下をご覧ください:

• MDN の「ページの設定: ブラウザの仕組み」。
• 「レンダーツリーの構築、レイアウト、ペイント」 (web.dev.
)
• 「ブラウザ レンダリングの解剖学: Web ページがどのように実現するか」 (Medium)。
• 「DOM とは何か、ブラウザでの HTML レンダリングはどのように行われるのか」 (Medium)。

さらに読む:

さらに詳しく知りたい場合は、以下の役立つリソースをご覧ください:

• GitHub 上の「react-fiber-architecture (acdlite)」。
• React.dev の 「レンダリング アンド コミット」
• 究極の React コース 2024: React、Next.js、Redux など、Jonas Schmedtmann 著

以上がReact の仕組みを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。