Verstehen, wie React funktioniert

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

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) に高速化され、アプリのパフォーマンスが向上します。

• Fiber Tree: Dieser Baum wird während des Initial Render erstellt. Es spiegelt den virtuellen DOM-Baum wider, jedoch mit Unterschieden. Es bietet Einblick in:
  • Aktueller Status
  • Requisiten
  • Nebenwirkungen
  • Gebrauchte Haken
  • Arbeitswarteschlange

Die Renderphase ist asynchron, d. h. sie kann je nach Bedarf angehalten, fortgesetzt, abgebrochen oder priorisiert werden. Dadurch kann React den Fiber Tree kontinuierlich aktualisieren, während die App ausgeführt wird.

Das Endergebnis dieser Phase ist eine Liste der Effekte, die an die nächste Phase übergeben wird.

3. Commit-Phase

In dieser Phase übernimmt React die in der Renderphase generierte Liste der Effekte und wendet diese Änderungen auf das DOM an. Dies wird von einer anderen Bibliothek erledigt, ReactDOM. ReactDOM ist für die Manipulation des tatsächlichen DOM basierend auf den von React identifizierten Änderungen verantwortlich.

Wichtiger Hinweis: Während React für die Erstellung der UI-Struktur verantwortlich ist, übernimmt ReactDOM browserspezifische Vorgänge. Das bedeutet, dass für verschiedene Plattformen (z. B. React Native) eine andere Bibliothek wie React Native verwaltet, wie die Benutzeroberfläche gerendert wird.

Die Commit-Phase muss synchron sein, da wir unsere Schnittstelle nicht teilweise rendern können. Die Änderungen müssen alle auf einmal übernommen werden.

4. Browser-Paint

Dieser letzte Schritt liegt außerhalb des Geltungsbereichs von React. Dabei zeichnet die Rendering-Engine des Browsers die Änderungen auf dem Bildschirm auf. Jeder Browser handhabt dies anders und es lohnt sich, einen Blick auf browserspezifische Rendering-Prozesse zu werfen.

Wenn Sie daran interessiert sind, wie Browser funktionieren, schauen Sie sich Folgendes an:

• "Befüllen der Seite: Funktionsweise von Browsern" auf MDN.
• „Render-Tree-Konstruktion, Layout und Farbe“ auf web.dev.
• „Die Anatomie des Browser-Renderings: Wie Webseiten zum Leben erweckt werden“ auf Medium.
• „Was ist das DOM und wie erfolgt die HTML-Wiedergabe in Browsern?“ auf Medium.

Weiterführende Literatur:

Wenn Sie tiefer eintauchen möchten, finden Sie hier einige nützliche Ressourcen:

• "react-fiber-architecture (acdlite)" auf GitHub.
• "render-and-commit" auf React.dev.
• Der ultimative React-Kurs 2024: React, Next.js, Redux & mehr von Jonas Schmedtmann.

Das obige ist der detaillierte Inhalt vonVerstehen, wie React funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!