本篇文章主要的講述了關(guān)于reactjs的生命周期的介紹，還有關(guān)于react的setState機制介紹，下面就讓我們看文章的正文內(nèi)容吧

生命體的周期是單一不可逆的，軟件開發(fā)的生命周期會根據(jù)方法不同，在完成前重新開始

生命周期

一、初探生命周期

React組件的生命周期根據(jù)廣義定義描述，可以分為掛載、渲染和卸載。

生命周期分兩類：

1）當(dāng)組件在掛載或者卸載時

2）當(dāng)組件接受新數(shù)據(jù)時，即組件更新

一）掛載或卸載

1、組件掛載

最基本過程：組件狀態(tài)初始化：讀取初始state和props, 以及compontentWillMount()和componentDidMount()

2、組件卸載

只有componentWillUnmount這一個卸載前狀態(tài)

二）數(shù)據(jù)更新過程

1、組件自身state更新：shouldCompontentUpdate ? componentWillUpdate ?render componentDidUpdate

2、props改變引發(fā)的繪制：componentWillRecieveProps ?shouldComponentUpdate ?componentWillUpdate?render componentDidUpdate

總結(jié)起來：

二、自定義組件（ReactCompositeComponent）的生命周期主要通過三種狀態(tài)進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，

它們負責(zé)通知組件當(dāng)前所處的狀態(tài)，應(yīng)該執(zhí)行生命周期中的哪個步驟，是否可以更新state。

• mountComponent ->?MOUNTING

• updateComponent ->?RECEIVE_PROPS

• unmountComponent ->?UNMOUNTING

MOUNTING

一mountComponent：

通過mountComponent掛載組件，初始化序號、標記等參數(shù)，判斷是否為無狀態(tài)組件，并進行對應(yīng)的組件初始化工作，比如初始化props、context等參數(shù)。

利用getInitialState獲取初始化state、初始化更新隊列和更新狀態(tài)。

mountComponent本質(zhì)上是通過?遞歸?渲染內(nèi)容的，由于遞歸的特性，父組件的componentWillMount在其子組件的componentWillMount之前調(diào)用，而父組件的componentDidMount在其子組件的componentDidMount之后調(diào)用。

二）updateComponent

若存在componentWillReceiveProps，則執(zhí)行。如果此時在componentWillReceiveProps中調(diào)用setState，是不會觸發(fā)re-render的，

而是會進行state合并。且在componentWillReceiveProps、shouldComponentUpdate和componentWillUpdate中也還是無法獲取到更新后的this.state，

即此時訪問的this.state 仍然是未更新的數(shù)據(jù)，需要設(shè)置this.state = nextState后才可以，只有在render和componentDIdUpdate中才能獲取到更新后的this.state。（想看更多就到PHP中文網(wǎng)React參考手冊欄目中學(xué)習(xí)）

updateComponent本質(zhì)上是通過?遞歸?渲染內(nèi)容的，由于遞歸的特性，父組件的componentWillUpdate在其子組件的componentWillUpdate之前調(diào)用，而父組件的componentDidUpdate在其子組件的componentDidUpdate之后調(diào)用。

注意：禁止在shouldComponentUpdate和componentWillUpdate中調(diào)用setState，這會造成循環(huán)調(diào)用，直至耗光瀏覽器內(nèi)存后崩潰。

三）unmountComponent

unmountComponent負責(zé)管理生命周期中的componentWillUnmount。

如果存在componentWillUnmount，則執(zhí)行并重置所有的相關(guān)參數(shù)、更新隊列以及更新狀態(tài)，如果此時在componentWillUnmount中調(diào)用setState，是不會觸發(fā)re-render的，這是因為所有更新隊列和更新狀態(tài)都被重置為null，并清除了公共類，完成了組件寫在操作。

三、無狀態(tài)組件

只有一個render方法，并沒有組件類的實例化過程，也沒有實例返回

沒有狀態(tài)，沒有生命周期，只有純粹接受prop渲染成dom結(jié)構(gòu)，純粹為渲染而生

setState機制

一、setState異步更新

注意：絕對不要直接修改this.state，這是一種低效做法，而且很有可能被之后的操作替換

1、setState通過隊列機制實現(xiàn)state更新, 隊列機制可以高效地批量更新state

2、利用狀態(tài)隊列機制實現(xiàn)setState的異步更新，避免頻繁地重復(fù)的更新state

3、當(dāng)執(zhí)行setState時，會將需要更新的state合并后放入狀態(tài)隊列，而不會立刻更新this.state

二、setState調(diào)用棧

簡化調(diào)用棧：

若?isBatchingUpdates?為?true，則把當(dāng)前組件（即調(diào)用了 setState 的組件）放入 dirtyComponents 數(shù)組中；否則 batchUpdate 所有隊列中的更新。

本篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)React使用手冊欄目中學(xué)習(xí)），有問題的可以在下方留言提問。

以上就是Reactjs的生命周期是什么？reactjs生命周期的詳細介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！