了解 React 的工作原理

什麼是反應？ ⚛️

React 是一個 JavaScript 函式庫，它可以幫助我們更快、更有效率地建立 Web 應用程式。它可以使用單頁應用程式（SPA）模型更好地處理資料和工作。雖然這是一個簡潔的定義，但我發現另一個更全面的定義：

「React 是一個非常流行的 JavaScript 庫，它使用元件和狀態來建立使用者介面 (UI)。它由 Facebook 開發。」

- 喬納斯‧施梅特曼

注意：從這裡開始，我假設您對 React 有一定的了解或以前使用過它。

---

React 是如何運作的？

React 完全基於元件 的概念。元件是 UI 中可以重複使用的較小部分。現在，讓我們來看看程式碼如何變成您在螢幕上看到的 UI 的過程。

元件 → 元件實例 → React 元素 → DOM 元素 → 螢幕上的> 現在您已經了解了元件是什麼，讓我們深入了解

元件實例

，它們是元件的實際工作版本。本質上，元件就像藍圖或模板。當我們建立元件實例時，我們傳遞 props 並為其分配特定的狀態。這些實例是我們在 React 中使用的。 如果你想更深入地了解這個概念，我建議在 Medium 上搜尋

「React 元件、實例和元素」

。 現在，我的目標是解釋接下來發生的過程：

React 元素

→ DOM 元素 → 螢幕上的 UI 這個過程分為四個階段，我們將一一探討：

渲染已觸發
渲染階段
提交階段
瀏覽器畫圖

1. 渲染被觸發

---

渲染可以在兩種情況下觸發：

初始渲染
• ：首次載入應用程式時會發生這種情況。
狀態更新（重新渲染）
• ：當應用程式發生變更時（通常是狀態變更時），會發生這種情況。
此階段沒有發生太多事情，所以讓我們繼續下一階段。

2. 渲染階段

---

現在，讓我們重新定義「渲染」的意思。作為前端開發人員，我們經常使用術語

render

來描述 UI 中的變更。但這並不完全準確。 React 中的渲染意味著為下一階段準備 UI。 渲染階段涉及幾個步驟：

步驟1：

觸發重新渲染的元件實例

這是 React 偵測到元件中發生變更的時候。

步驟 2：

反應元素

此步驟涉及收集項目中的所有組件並建立所謂的

虛擬 DOM 樹

。該樹將組件之間的關係概述為節點，其中每個父組件都有其子組件。 這裡有一點很重要：當父元件改變時，它的所有子元件也會重新渲染。

在這個階段，幾件事情同時發生：

---

首先，React 會建立虛擬 DOM 樹。

• 接下來，
協調器
• 介入。它負責識別發生了什麼變化。在 React 中，協調器稱為 Fiber.
如果您想詳細探索 Fiber，您可以查看：

Medium 上的「什麼是 React Fiber 以及它如何幫助您建立高效能 React 應用程式」
• 。
Dhiwise 上的「使用 React Fiber 建立高效能應用程式」
• 。

什麼是纖維？

Fiber 是負責協調組件變化的引擎。它告訴我們什麼改變了，什麼被刪除了，什麼被加了。這是一個簡化的解釋，但 Fiber 涉及幾個關鍵概念：

協調
• ：識別變更（新增、更新或刪除 DOM 元素）。
Diffing
• ：一種高度最佳化的演算法，用於將目前 DOM 與虛擬 DOM 進行比較。它基於兩個規則運行： 如果 DOM 元素的類型改變。
  1. 如果屬性或道具發生變化。
此演算法將運算速度從

O(n³)

加速到 O(n)，從而提高了應用程式效能。

• Fiber Tree: 이 나무는 초기 렌더링 중에 생성됩니다. 가상 DOM 트리를 미러링하지만 차이점이 있습니다. 이는 다음에 대한 통찰력을 제공합니다.
  • 현황
  • 소품
  • 부작용
  • 중고후크
  • 작업 대기열

렌더링 단계는 비동기식입니다. 즉, 필요에 따라 일시 중지, 재개, 취소 또는 우선 순위를 지정할 수 있습니다. 이를 통해 React는 앱이 실행되는 동안 지속적으로 Fiber Tree를 업데이트할 수 있습니다.

이 단계의 최종 결과는 효과 목록이며, 이는 다음 단계로 전달됩니다.

---

3. 커밋 단계

이 단계에서 React는 렌더링 단계에서 생성된 List of Effects를 가져와 이러한 변경 사항을 DOM에 적용합니다. 이는 다른 라이브러리인 ReactDOM에서 처리합니다. ReactDOM은 확인된 React 변경 사항을 기반으로 실제 DOM을 조작하는 역할을 담당합니다.

중요: React는 UI 구조 생성을 담당하지만 ReactDOM은 브라우저별 작업을 처리합니다. 즉, 다양한 플랫폼(예: React Native)의 경우 React Native와 같은 다른 라이브러리가 UI 렌더링 방법을 관리합니다.

인터페이스를 부분적으로 렌더링할 수 없기 때문에 커밋 단계는 동기식이어야 합니다. 변경사항을 한꺼번에 적용해야 합니다.

---

4. 브라우저 페인트

이 마지막 단계는 React의 범위를 벗어납니다. 여기에는 브라우저의 렌더링 엔진이 화면 변경 사항을 그리는 작업이 포함됩니다. 브라우저마다 이를 다르게 처리하므로 브라우저별 렌더링 프로세스를 살펴보는 것이 좋습니다.

브라우저 작동 방식에 관심이 있다면 다음을 확인하세요.

• MDN의 "페이지 채우기: 브라우저 작동 방식"
• web.dev의 "렌더 트리 구성, 레이아웃 및 페인트"
• Medium의 "브라우저 렌더링 분석: 웹 페이지가 어떻게 살아 움직이는지"
• Medium의 "DOM이란 무엇이며 브라우저에서 HTML 렌더링이 어떻게 발생합니까?"

---

추가 자료:

더 자세히 알아보고 싶다면 다음 유용한 리소스를 참조하세요.

• GitHub의 "react-fibre-architecture(acdlite)"
• React.dev의 "렌더링 및 커밋"
• 2024년 최고의 React 과정: React, Next.js, Redux 등 작성자: Jonas Schmedtmann.

---

以上是了解 React 的工作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！