v19.2Latest

將你的 UI 理解為樹狀結構

你的 React 應用程式正隨著許多元件相互嵌套而逐漸成形。React 是如何追蹤你的應用程式元件結構的呢？

React 以及許多其他 UI 函式庫，都將 UI 建模為樹狀結構。將你的應用程式視為一棵樹，有助於理解元件之間的關係。這種理解將幫助你除錯未來的概念，例如效能和狀態管理。

你的 UI 作為樹狀結構

樹狀結構是項目之間的關係模型。UI 通常使用樹狀結構來表示。例如，瀏覽器使用樹狀結構來建模 HTML（DOM）和 CSS（CSSOM）。行動平台也使用樹狀結構來表示其視圖層次結構。

React 從你的元件建立一個 UI 樹。在此範例中，UI 樹隨後被用於渲染到 DOM。

與瀏覽器和行動平台類似，React 也使用樹狀結構來管理和建模 React 應用程式中元件之間的關係。這些樹狀結構是理解資料如何在 React 應用程式中流動，以及如何最佳化渲染和應用程式大小的有用工具。

元件的一個主要特性是能夠組合其他元件。當我們嵌套元件時，我們就有了父元件和子元件的概念，其中每個父元件本身也可能是另一個元件的子元件。

當我們渲染一個 React 應用程式時，我們可以在一個樹狀結構中建模這種關係，稱為渲染樹。

這是一個渲染勵志名言的 React 應用程式。

React 建立一個渲染樹，一個由已渲染元件組成的 UI 樹。

從範例應用程式中，我們可以建構出上述的渲染樹。

該樹由節點組成，每個節點代表一個元件。App、FancyText、Copyright，僅舉幾例，都是我們樹中的節點。

React 渲染樹中的根節點是應用程式的根元件。在此案例中，根元件是App，它是 React 渲染的第一個元件。樹中的每個箭頭都從父元件指向子元件。

Deep Dive

渲染樹中的 HTML 標籤在哪裡？

渲染樹代表了 React 應用程式的一次渲染過程。透過條件式渲染，父元件可能會根據傳遞的資料渲染不同的子元件。

我們可以更新應用程式，使其有條件地渲染勵志名言或顏色。

透過條件式渲染，在不同的渲染過程中，渲染樹可能會渲染不同的元件。

在這個範例中，根據 inspiration.type是什麼，我們可能會渲染<FancyText> 或 <Color>。每次渲染過程的渲染樹可能都不同。

儘管渲染樹在每次渲染過程中可能不同，但這些樹通常有助於識別 React 應用程式中哪些是頂層元件以及哪些是葉子元件。頂層元件是最接近根元件的元件，它們影響其下所有元件的渲染效能，並且通常包含最複雜的邏輯。葉子元件位於樹的底部，沒有子元件，並且經常被重新渲染。

識別這些類別的元件對於理解應用程式的資料流和效能非常有用。

React 應用程式中另一種可以用樹來建模的關係是應用程式的模組依賴關係。當我們將元件和邏輯拆分到不同的檔案時，我們會建立 JS 模組，在其中我們可以匯出元件、函數或常數。

模組依賴樹中的每個節點都是一個模組，每個分支代表該模組中的一個import 語句。

如果我們拿之前的 Inspirations 應用程式為例，我們可以建構一個模組依賴樹，或簡稱依賴樹。

Inspirations 應用程式的模組依賴樹。

樹的根節點是根模組，也稱為入口點檔案。它通常是包含根元件的模組。

與同一個應用程式的渲染樹相比，結構相似但有一些顯著差異：

構成樹的節點代表模組，而非元件。
非元件模組，例如 inspirations.js，也會在此樹中表示。渲染樹僅封裝元件。
Copyright.js 出現在 App.js之下，但在渲染樹中，Copyright 元件則作為 InspirationGenerator的子元件出現。這是因為InspirationGenerator接受 JSX 作為子元件屬性，因此它將Copyright渲染為子元件，但並未匯入該模組。

依賴樹對於確定運行 React 應用程式需要哪些模組非常有用。在為生產環境建構 React 應用程式時，通常會有一個建構步驟，將所有必要的 JavaScript 打包以發送給客戶端。負責此工作的工具稱為打包工具，打包工具會使用依賴樹來確定應包含哪些模組。

隨著應用程式的增長，打包檔案的大小通常也會增加。過大的打包檔案對客戶端來說下載和運行成本高昂。過大的打包檔案可能會延遲使用者介面的繪製時間。了解應用程式的依賴樹可能有助於調試這些問題。