react生命週期詳解

React的生命週期總共分為初始化階段，更新以及銷毀階段。初始化表示元件在DOM樹進行第一次渲染，更新表示元件重新渲染的過程；銷毀表示元件從DOM中刪除的過程

React是一個用來建立使用者介面的JavaScript函式庫，它主要用於建立UI，它具有較高的效能而且程式碼邏輯非常簡單。今天將要介紹的是React的生命週期，具有一定的參考作用，希望對大家有幫助。

【推薦課程：#react教學】

#react生命週期分為三個階段分別是：初始化階段，更新階段，銷毀階段。接下來在文章中將為大家詳細介紹

初始化階段：

即把元件第一次在DOM樹中渲染

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

#初始化階段也就是上述程式碼中類別的建構方法一樣，Test類繼承了react Component基類，也就等同於繼承了react的基類，這樣才有了render()，即生命週期等方法才可以使用。

程式碼中super(props)主要是用來呼叫基底類別的建構方法constructor()的，同時也將父元件的props注入給子元件，讓子元件讀取。這裡要注意的是元件中props只讀不可變，而state是可變的。

建構子constructor()是用來做一些元件的初始化工作，如定義this.state中的初始內容

更新階段：

表示元件被重新渲染的過程

當props或是state被修改時，就會觸發元件的更新過程

componentWillReceiveProps（nextProps）

當父元件的render函數被呼叫時，在render函數裡被渲染的子元件，都會經歷更新的過程，無論父元件傳給子元件的props有沒有改變，都會觸發componentWillReciveProps 

注意this.setState觸發的更新，不會呼叫上述的方法。如果this.setState的呼叫觸發了上述的方法，則會導致死循環。只有當nextProps和this.props兩者有變化的時候，才會呼叫this.setState來更新元件內部的state

shouldComponentUpdate（nextProps，nextState）

該方法決定了一個元件什麼時候不需要渲染，如果使用的恰當則會提高效能

當回傳true時則呼叫componentWillUpdate，render，componentDidUpdate，否則不會有後續的方法呼叫。

實際上，React做伺服器端渲染的時候，基本上不會經歷更新過程，因為服務端渲染，只需要產出HTML的字串就好了，而初始化階段就可以實現，所以一般情況下，伺服器端是不會呼叫compentDidUpdate方法，如果呼叫了說明程式出錯了，需要改進

銷毀階段：

表示元件從DOM刪除的過程

在銷毀階段只有一個生命週期方法：

componentWillUnmount

這個方法在元件被銷毀前調用，主要執行一些清理工作，例如清除元件中使用的計時器，componentDidMount中手動建立的DOM元素等，以避免造成記憶體洩漏。

###總結：以上就是這篇文章的全部內容了，希望對大家有幫助。 ###

以上是react生命週期詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！