樹（Tree）是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構，以及使用 CSS 來完成外觀更動時，都會運用到相對應的樹的結構 HTML (DOM) 跟 CSS (CSSOM)。React 也是使用 Tree 這樣的結構來生成 UI。在前面的篇章就有提到，React App 會需要從一個 Root Component 開始不斷長下去，這就是樹的概念，會把一層一層的 Component 持續包含進去。了解這個概念就能幫助我們知道資料如何在 App 裡面傳遞，以及要如何讓我們 render 的效能更好，甚至會影響到我們整個程式碼的大小。
今天的文章參考官方文件的：

• https://zh-hant.react.dev/learn/understanding-your-ui-as-a-tree

The Render Tree

在前面幾個篇章的範例就可以知道，每個 Component 之間是有 Parent 跟 Child 的關係的，用樹的架構來表現就可以看到 UI 之間的 render 關係。拿這次文章中的例子就會是：

可以很清楚的看到，首先會是我們的 Root Component App，再來他負責 render InspirationGenerator 跟 FancyText 這兩個 component。而 InspirationGenerator 會再負責 render FancyText 跟 Copyright。

如果加入我們在前面篇章所知道的條件式 rendering，Component 就會根據條件 render 不同的 UI 畫面，這時候的樹就會變成：

這樣是不很就能很清楚每個 Component 之間的關係。

模組關係樹（The Module Dependency Tree）

另一個 React 會使用到的樹，就是 JavaScript 檔案之間的關係，只要我們在檔案裡面有 import 跟 export 的使用，檔案之間就會產生關係。一樣拿剛剛的例子，關係樹就會畫成：

可以看到有一些 Component 的位置不一樣了，像是原本的 Copyright 變到跟 InspirationGenerator 同一層，原因是我們是在 App.js 裡面 import Copyright.js 後再當作 InspirationGenerator 的 child 傳下去，所以在模組關係樹裡面他會跟 InspirationGenerator 在同一層。
另外一個可以發現不一樣的是，多了 inspirations.js 這個檔案，原因是在模組關係樹裡，除了 Component 以外，只要引用 import 到的 JavaScript 檔案都會一起包含在裡面，不會只有 Component 而已。

這個關係樹會影響到我們上傳到瀏覽器使用的 JavaScript 程式碼，通常會用像是 webpack 之類的 打包工具（bundler） 幫我們打理這些關係讓瀏覽器使用。要怎麼最佳化這些關係而讓打包的檔案大小的效率最好，也是在開發網站中一項非常重要的能力。

小結

今天先簡單介紹一下樹的這個概念，以後跟 React render 相關的東西都還可能會運用到，尤其是在提升我們 render 效能的時候就要考慮到。大家可以先記著，之後會有更多的內容。
最後今天的文章就到這邊，感謝大家耐心地看完，有任何問題與建議都歡迎告訴我，明天見，晚安。