Reactjs的生命週期是什麼？ reactjs生命週期的詳細介紹

這篇文章主要的講述了關於reactjs的生命週期的介紹，還有關於react的setState機制介紹，下面就讓我們看文章的正文內容吧

生命體的周期是單一不可逆的，軟體開發的生命週期會根據方法不同，在完成前重新開始

#生命週期

一、初探生命週期

React元件的生命週期依廣義定義描述，可分為掛載、渲染和卸載。

生命週期分兩類：

1）當元件在掛載或卸載時

#2）當元件接受新資料時，即元件更新

一）掛載或卸載

1、元件掛載

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

2、元件卸載

只有componentWillUnmount這一個卸載前狀態

#二）資料更新過程

1、元件本身state更新：shouldCompontentUpdate   componentWillUpdate  render componentDidUpdate

2、props改變引發的繪製：componentWillRecieveProps shouldComponentUpdate  componentWillUpdate render componentDidUpdate

#總結起來：

二、

自訂元件（ReactCompositeComponent）的生命週期主要透過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，

• #它們負責通知元件目前所處的狀態，並且應該執行生命週期中的哪個步驟，是否可以更新state。

• mountComponent -> MOUNTING

##updateComponent -> RECEIVE_PROPS

##updateComponent -> RECEIVE_PROPS

unmountComponent -> UNMOUNTING

##MOUNTING#一mountComponent：

#透過mountComponent掛載元件，初始化序號、標記等參數，判斷是否為無狀態組件，並進行對應的組件初始化工作，例如初始化props、context等參數。

#####################利用getInitialState取得初始化state、初始化更新佇列、更新狀態。 ############

mountComponent本質上是透過 遞歸 渲染內容的，由於遞歸的特性，父元件的componentWillMount在其子元件的componentWillMount之前調用，而父元件的componentDidMount在其子元件的componentDidMount之後呼叫。

#二）updateComponent

#若存在componentWillReceiveProps，則執行。如果此時在componentWillReceiveProps中呼叫setState，是不會觸發re-render的，

##而是會進行state合併。且在

componentWillReceiveProps、shouldComponentUpdate和componentWillUpdate#也還是無法取得到更新後的this.state，

###即此時造訪的this.state 還是未更新的數據，需要設定this.state = nextState後才可以，######只有在render和componentDIdUpdate中才能取得到更新後的this.state#####。 #########（想看更多就到PHP中文網###React參考手冊###欄位中學習）######################### ######updateComponent###本質上是透過 遞歸 渲染內容的，由於遞歸的特性，父元件的componentWillUpdate在其子元件的###componentWillUpdate###之前調用，而父元件的### componentDidUpdate###在其子元件的######componentDidUpdate######之後呼叫。 ######

注意：禁止在shouldComponentUpdate和componentWillUpdate中調用setState，這會造成循環調用，直到耗光瀏覽器記憶體後崩潰。

#unmountComponent

##unmountComponent

# #unmountComponent負責管理生命週期中的componentWillUnmount。

如果存在componentWillUnmount，執行並重置所有的相關參數、更新佇列以及更新狀態，如果此時在componentWillUnmount中呼叫setState，是不會觸發re-render的，這是因為所有更新佇列和更新狀態都被重置為null，並清除了公共類，完成了元件寫在操作。

三、無狀態元件

只有一個render方法，沒有元件類別的實例化過程，也沒有實例回傳

沒有狀態，沒有生命週期，只有純粹接受prop渲染成dom結構，純粹為渲染而生

setState機制

一、setState非同步更新

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

1、setState透過佇列機制實作state更新, 佇列機制可以有效率地批次更新state

##2、利用狀態佇列機制實作setState的非同步更新，避免頻繁重複的更新state

#3、執行

setState時，會將需要更新的state合併後放入狀態佇列，而不會立刻更新this.state

二、setState呼叫堆疊

簡化調用堆疊：

#若 isBatchingUpdates 為  true

，則把目前元件（即呼叫了 setState 的元件）放入 dirtyComponents 陣列中；否則 batchUpdate 所有佇列中的更新。

###這篇文章到這就結束了（想看更多就到PHP中文網###React使用手冊###欄位中學習），有問題的可以在下方留言提問。 ###

以上是Reactjs的生命週期是什麼？ reactjs生命週期的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！