? ? 當 React 應用程序逐漸成形時，許多組件會出現嵌套。那么 React 是如何跟蹤應用程序組件結構的？

? ? React 以及許多其他 UI 庫，將 UI 建模為樹。將應用程序視為樹對于理解組件之間的關系以及調試性能和狀態管理等未來將會遇到的一些概念非常有用。

將 UI 視為樹?

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

? ? 與瀏覽器和移動平臺一樣，React 還使用樹結構來管理和建模 React 應用程序中組件之間的關系。這些樹是有用的工具，用于理解數據如何在 React 應用程序中流動以及如何優化呈現和應用程序大小。

渲染樹?

組件的一個主要特性是能夠由其他組件組合而成。在 嵌套組件 中有父組件和子組件的概念，其中每個父組件本身可能是另一個組件的子組件。

當渲染 React 應用程序時，可以在一個稱為渲染樹的樹中建模這種關系。

這棵樹由節點組成，每個節點代表一個組件。例如，App、FancyText、Copyright 等都是我們樹中的節點。

在 React 渲染樹中，根節點是應用程序的 根組件。在這種情況下，根組件是 App，它是 React 渲染的第一個組件。樹中的每個箭頭從父組件指向子組件。

渲染樹表示 React 應用程序的單個渲染過程。在 條件渲染 中，父組件可以根據傳遞的數據渲染不同的子組件。

我們可以更新應用程序以有條件地渲染勵志語錄或顏色。