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