作者-Bartosz Szczeciński： 原文

React提供給開發者很多方法或‘鉤子’，調用于一個組件的生命周期，使我們更新UI和app state。了解何時使用哪些對正確理解如何使用React至關重要。

constructor

constuctors是OOP的基礎——一個無論何時一個新object被創建時被調用的特殊函數。調用一個特殊函數super非常重要，在我們的class extent任何其它class（也有定義了constructor）時。調用此特殊函數將call 我們parent class的constructor且允許初始化其本身。此即為何我們只有在初始化地call了super時才有權限訪問this.props的原因。

如上所述，constructor對于構建我們組件——創建任何領域（以this.開始的變量）或者初始化以接收到的props為基礎的state——非常完美。

這也是你通過在直接覆蓋this.state之處期待change/set state僅有的字段。在別的其它實例上記得用this.setState.

DO

• set initial state
• 若未用class屬性語法-準備所有class 字段和bind 將作為callback傳遞的函數。

DON'T

• cause any side effects (AJAX calls etc.)

componentWillMount

這是一個特殊情況 - componentWillMount與構造函數沒有多大區別 - 它只在初始安裝生命周期中被調用一次。 從歷史上看，使用componentWillMountover構造函數有一些原因，請參閱此react-redux問題，但請記住，此處描述的練習已被棄用。

很多人會試圖使用這個函數來發送請求來獲取數據，并希望在初始渲染準備好之前數據可用。 情況并非如此 - 當請求在渲染之前被初始化時，在渲染被調用之前它將不能完成。

此外，隨著對React Fiber的更改（post React 16 beta版本），此函數最終可能會在初始渲染被調用之前調用多次，因此可能會導致觸發多重副作用。 由于這個事實，不推薦使用這個函數來產生任何副作用。

值得注意的是，在使用服務器端渲染時調用此函數，而在這種情況下，它不會在服務器上調用對應的componentDidMount，而是在客戶端上調用。 所以如果在服務器部分需要一些副作用，這個函數應該被用作例外。

此函數中使用的setState是“空閑”的，不會觸發重新渲染。

DO

• update state 通過 this.setState
• perform last minute optimization（執行最后一分鐘優化）
• 僅在SSR造成side-effects (AJAX calls etc.)

DON'T

• 不在CS造成side-effects (AJAX calls etc.)

componentWillReceiveProps(nextProps)

這個函數將在每個更新生命周期中由props變化（父元素重新渲染）調用，并且將傳遞所有props傳遞的對象圖，無論自上次重新渲染后props值是否已經改變亦或自前個渲染階段。

這個函數是理想的，如果你有一個組件的狀態部分取決于從父組件傳遞的props作為調用this.setState在這里不會導致額外的渲染調用。

請記住，由于所有props都調用了該函數，所以即使對那些沒有改變的props，開發人員也會執行檢查以確定實際值是否發生了變化，例如：

componentWillReceiveProps(nextProps) {if(nextProps.myProp !== this.props.myProps) {// nextProps.myProp has a different value than our current prop// so we can perform some calculations based on the new value} } 復制代碼

由于使用React Fiber（16階測試版）這個功能可能會在實際調用renderfunction之前多次調用，因此不建議在此使用任何副作用導致的操作。

DO

• sync state to props(同步化state到props)

DON'T

• 造成side-effects (AJAX calls etc.)

shouldComponentUpdate(nextProps, nextState, nextContext)

默認情況下，所有基于類的組件都會在它們接收到的props，其狀態或環境發生變化時重新render自己。 如果重新渲染組件是計算重啟（例如生成圖表）或者出于某些性能原因不推薦使用，則開發人員可以訪問將在update cycle中調用的特殊函數。

這個函數將在內部調用props，state和object的下一個值。 開發人員可以使用它們來驗證更改是否需要重新渲染，并返回false以防止重新渲染發生。 在其他情況下，您預計會返回true。

DO

• 用于提高perfomance

DON'T

• 造成side-effects (AJAX calls etc.)
• call this.setState

componentWillUpdate(nextProps, nextState)

如果shouldComponentUpdate函數未被使用，或者它決定組件在此渲染周期中應更新，則將調用另一個生命周期函數。 此函數通常用于在state的某些部分基于props時，執行狀態和props同步。

在實現shouldComponentUpdate的情況下，可以使用此函數而不是componentWillReceiveProps，因為只有在實際重新渲染組件時才會調用此函數。

與所有其他componentWill *函數類似，此函數可能在渲染前最終調用多次，因此不建議在此執行導致操作的副作用。 DO

• synchronize state to props

DON'T

• 造成side-effects (AJAX calls etc.)

componentDidUpdate(prevProps, prevState, prevContext)

這個函數將在渲染完成后在每個重新渲染周期中被調用。 這意味著您可以確定組件及其所有子組件已正確render其自身。

由于這是唯一保證在每個重新render周期中僅被調用一次的函數，因此建議將此函數用于任何導致操作的副作用。 與componentWillUpdate和componentWillReceiveProps類似，即使這些值沒有發生實際更改，也會使用以前的props，state和context的object映射來調用此函數。 因為開發人員需要手動檢查給定的值是否發生了變化，然后才能執行各種更新操作：

componentDidUpdate(prevProps) {if(prevProps.myProps !== this.props.myProp) {// this.props.myProp has a different value// we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value - this.props.myProp} } 復制代碼

DO

• 造成side-effects (AJAX calls etc.)

DON'T

• call this.setState 因其可致re-render

上述規則的一個例外是基于某些DOM屬性更新狀態，只有在組件重新呈現后才能計算該屬性（例如，某些DOM節點的位置/維度）。 請注意防止更新，如果值實際上沒有更改，可能會導致渲染循環。

componentDidCatch(errorString, errorInfo)

React 16中的新增功能 - 此生命周期方法的特殊之處在于它可以對發生在子組件中的事件作出反應，特別是對任何子組件中發生的任何未捕獲錯誤。

通過這個添加，你可以讓你的父母元素處理錯誤 - 例如 - 設置錯誤信息狀態并在其渲染中返回適當的消息，或者登錄到報告系統，例如：

componentDidCatch(errorString, errorInfo) {this.setState({error: errorString});ErrorLoggingTool.log(errorInfo); } render() {if(this.state.error) return <ShowErrorMessage error={this.state.error} />return (// render normal component output); } 復制代碼

發生錯誤時，該函數將被調用：

• errorString - 錯誤的.toString（）消息
• errorInfo - 具有單個字段componentStack的對象，它表示堆棧跟蹤返回錯誤發生的位置，例如：

in Throwerin div (created by App)in App復制代碼

componentDidMount

這個函數在給定組件的整個生命周期中只會被調用一次，并且它被調用表示組件及其所有子組件被正確渲染。

由于這個函數被保證只被調用一次，因此它是完成AJAX請求等引起副作用的操作的理想選擇。

DO

• 造成side-effects (AJAX calls etc.)

DON'T

• call this.setState 因其可致re-render

上述規則的一個例外是基于某些DOM屬性更新狀態，只有在組件重新呈現后才能計算該屬性（例如，某些DOM節點的位置/維度）。 請注意防止更新，如果值實際上沒有更改，可能會導致渲染循環。

componentWillUnmount

如果它使用定時器（setTimeout，setInterval），打開套接字或執行我們需要在不再需要時關閉/移除的任何操作，則使用此函數在組件后面“清除”。

DO

• remove any timers or listeners created in lifespan of the component

DON'T

• call this.setState, start new listeners or timers

Component cycles

組件可能re-render有多種原因，并且每個組件中都會調用不同的函數，以便開發人員更新組件的某些部分。

• Component creation(組件創建)

第一個循環是組件的創建，這通常是在解析的JSX?中第一次遇到組件時發生的：

• Component re-rendering due to re-rendering of the parent component(由于父組件更新而組件更新)

• Component re-rendering due to internal change (e.g. a call to this.setState())( 由于內部改變的組件更新)

• Component re-rendering due to call to this.forceUpdate(由于call this.forceUpdate而re-render的組件)

• Component re-rendering due to catching an error(由于捕獲錯誤而更新組件)

在React 16中引入了“ErrorBoundaries”。 一個組件可以定義一個特殊的層，它可以捕獲錯誤并提供一個新的生命周期方法 - componentDidCatch - 它允許開發人員提供自我修復操作以恢復或優雅地處理錯誤。

Shoutout to@James_k_nelson，他剛剛發布了一個componentWillReceiveProps模擬器，你可以在reactarmory.com/guides/life…找到并使用它。

總結

以上是生活随笔為你收集整理的理解React-组件生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。