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