React元件的生命週期函數是什麼

每一個元件都有一些生命週期函數。

當元件實例被建立並且會插入到DOM中，下面這些函數會被呼叫

constructor
componentWillMount
render
componentDidMount

改變元件的state或props會導致更新，當重新渲染元件時會呼叫下面這些方法

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

當元件從DOM移除，會呼叫下面的方法

componentWillUnmount

一.render()

render方法是必須的，render的回傳值是下面的型別：
( 1)react元素：要嘛是自訂的元件或原生的DOM元件
(2)字串或數字:會被渲染成DOM中的文字節點
(3)Portals:透過ReactDOM.createPortal建立
##(4)null: 什麼都不會渲染
(5)Boolean:什麼都不渲染
#(6)包含多個元素的陣列
#

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

 render

方法應該是簡單的，在render中不能修改元件的state，每次呼叫render都會回傳一個新的結果。並且在render中也不能與瀏覽器進行交互，如果需要與瀏覽器交互，就在componentDidMount或其他生命週期函數中執行。

」元件的構造函數在元件裝載之前調用。如果沒有顯示的定義constructor，那麼在實例化元件時會呼叫預設的constructor，如果在React.Component的子類別中顯示的定義了constructor，那麼就要在constructor中最開始呼叫super(props).在建構函式中實例化state是一個很好的選擇。以下舉例一段程式碼

#

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

  在react中使用props初始化state是合法的，但這有一個問題：當props被更新時，state並不會被更新。解決的方法是：在元件的componentWillReceiveProps(nextProps)中用新的props更新state。雖然這能解決問題，但不推薦，建議把state提升到最近的公共父元件中

三.componentWillMount()#當裝載發生前會立即呼叫componentWillMount,componentWillMount會在調用render之前被調用，所有在componentWillMount中修改state，不會導致元件的重新渲染。伺服器端渲染才會呼叫這個方法，所有推薦都透過

constructor取代這個方法。 #####################

四.componentDidMount()

當元件被裝載完成會立即觸發componentDidMount，在這個函式中修改state被導致元件重新渲染。組件被裝載之後才能操作DOM。如果你需要載入遠端數據，在這個地方發送網路請求是個不錯的主意.

#五.componentWillReceiveProps(nextProps)

當已經被轉載的元件接受新的props之前componentWillReceiveProps會被觸發。如果你需要更新state去回應props的更新，可以在這裡透過setState方法更新state。當元件首次接受到props，這個方法不會被呼叫.
注意：props沒有被改變也可能會呼叫這個方法，所有在這個方法中將目前的props去next props進行比較是很有必要的。

#c.shouldComponentUpdate(nextState,nextProps)

當新的props或state被接受，在渲染之前會呼叫shouldComponentUpdate，這個方法預設是回傳true，初次渲染和使用forceUpdate，不會呼叫這個方法。如果shouldComponentUpdate回傳false,之後的componentWillUpdate,render以及componentDidMount不會被呼叫,元件以及他的子元件不會被重新渲染。

#七.componentWillUpdate(nextProps, nextState)

當接受到新的props或state，在重新渲染之前會立即呼叫這個方法。在這個方法中不能this.setState()，初次渲染不會呼叫這個方法

c.componentDidUpdate(prevProps, prevState)

當更新完成之後會立即呼叫這個方法，初次渲染不會呼叫這個方法。當元件被更新之後可以在這裡操作DOM，當你發現現在的props與之前的props不一樣，在這裡發送網路請求是個不錯的主意

##九.componentWillUnmount()

#元件被摧毀之前會立即呼叫這個方法，在這個方法中可以做一些必要的清理

以上是React元件的生命週期函數是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！