4.7 React生命周期介紹

在前一節(jié)的結(jié)尾，我們提出了一個(gè)問題。下面就告訴讀者，React框架為組件設(shè)計(jì)了一個(gè)“生命周期”的概念，用于配合React狀態(tài)（State）實(shí)現(xiàn)組件的渲染操作。

在React組件中，生命周期可基本分成三個(gè)狀態(tài)，具體如下：

●Mounting：已開始掛載真實(shí)的組件DOM。

●Updating：正在重新渲染組件DOM。

●Unmounting：已卸載真實(shí)的組件DOM。

同時(shí)，React框架定義了一組關(guān)于生命周期的方法，具體如下：

●componentWillMount()方法：在渲染前調(diào)用，可以在客戶端，也可以在服務(wù)端。

●componentDidMount()方法：在第一次渲染后調(diào)用，只作用于客戶端。

●componentWillUpdate()方法：在組件接收到新的Props參數(shù)或者State狀態(tài)、但還沒有渲染時(shí)被調(diào)用。另外，該方法在初始化時(shí)不會(huì)被調(diào)用。

●componentDidUpdate()方法：在組件完成更新后會(huì)立即調(diào)用。另外，該方法在初始化時(shí)不會(huì)被調(diào)用。

●componentWillUnmount()方法：在組件從DOM中被移除之前會(huì)立刻被調(diào)用。

以上這組與生命周期相關(guān)的方法，可以放到ES6組件類中進(jìn)行使用，從而實(shí)現(xiàn)對(duì)React組件狀態(tài)的控制。下面在【代碼4-4】的基礎(chǔ)上進(jìn)行簡(jiǎn)單的修改，演示一下這組方法的用法：

【代碼4-16】

關(guān)于【代碼4-16】的說明：

●第08行和第09行代碼所定義的方法，就是對(duì)React生命周期的使用過程。當(dāng)然，設(shè)計(jì)人員可以選擇自己項(xiàng)目所需的生命周期方法，無需將全部生命周期方法都放進(jìn)組件類中。