前言
上一章提到 React 通過 ReactDOM.render 函數將應用程序首次渲染到屏幕，ReactDOM.render 函數中的兩個重要的參數分別是 React 元素（element）和容器（container）。**事實上，開發(fā)者寫的應用程序一般由眾多「組件」組成，為什么在渲染時會以「元素」的形式傳染到渲染函數中呢？**要想弄清楚這個問題，我們需要對 React 世界中的組件與元素進行深入了解。
通過執(zhí)行ReactDOM.render函數 React 將應用程序首次渲染到屏幕。在這個渲染流程中，React 需要先后經歷組件轉換元素、解析更新與更新隊列、調用生命周期函數等操作，在這些操作的背后離不開基礎理論體系的支撐。
那么，在 React 世界中有哪些重要的基礎概念呢？
重要的基礎概念
- 組件：可以是一個函數或一個類。
- 生命周期函數：在應用程序運行的特定階段執(zhí)行對應的函數。
- 元素：一個普通 JS 對象，由組件轉化而來，在運行時再轉化為 React fiber 對象。
- 組件實例：類組件實例化后的對象，主要作用是返回組件元素、響應事件等。
- 更新（update）：一個 JS 對象，包含過期時間（expirationTime）和更新內容（payload）等。
- 更新隊列（updateQueue）：一個 JS 對象，是更新（update）的集合，鏈表結構。
- React Fiber：React v16 版本開始引入的架構。
這些重要的基礎概念之間有什么關系呢？ 見圖 2.1.2。
React 組件一般由開發(fā)者定義，應用程序運行時 React 為 class 類型的組件創(chuàng)建組件實例。在應用程序渲染的不同階段 React 會執(zhí)行組件實例上面對應的生命周期函數以及獲取其 state 和 props。此外，React 通過組件實例調用組件的render函數獲取到該組件內部的元素。在 render 階段 React 將元素逐個轉換為對應類型的 Fiber 結點（最終形成 workInProgress 樹）。
當組件內部有this.setState( ... )操作時，React 首先根據this對象找到對應的 Fiber 結點，然后將更新加入到當前 Fiber 結點的更新隊列。
注：上面組件生成組件實例，組件實例返回元素等邏輯在后面會進行詳細介紹。
你真正理解 React 組件嗎？下一節(jié)將會詳細介紹 React 組件的設計思想。