了解React元件的生命周期

本文作者寫作的時間較早，是以裡面會出現很多的舊版ES5的時代的方法。不過，雖然如此并不影響讀者了解元件的生命周期。反而是作者分為幾種不同的觸發機制來解釋生命周期的各個方法，讓讀者更加容易了解涉及到的概念。以下是正文。

簡介

React

在建立元件的時候會觸發元件生命周期各個方法的調用。這篇文章就分别介紹其中的各種不同的繪制觸發之後調用的各個生命周期的方法。

了解元件的生命周期，你才可以在元件建立、銷毀的時候執行特定的方法。甚至于，你可以決定是否更新元件，正确的處理

state

、

props

的改變。

生命周期

要弄清楚生命周期，首先就要區分開初次建立和

state

、

props

更改觸發的元件更新，以及元件的解除安裝。

初始化

初始化
√	initial props
√	initial state
√	`componentWillMount`
√	`render`
√	`componentDidMount`

在ES6裡，initial props在類的

constructor

方法裡作為參數傳入了。initial state則在

constructor

方法裡有開發者自行設定。如：

class DemoComponent extends React.Component {
    constructor(props) {
    super(props)

    this.state = {
        initialState: 'value',
    }

    this._innerMethod = this._innerMethod.bind(this)
  }
}

componentWillMount

方法在

render

方法執行之前被調用。有一點需要注意，在這裡設定state不會觸發重繪。

render

方法傳回元件需要的标記（markup），并最終轉化為正确的輸出。

props

和

state

都不應該在這個方法裡修改。一定要記住

render

方法必須是一個純函數。也就是每次調用，這個方法都要傳回同樣的結果。

當

render

方法執行之後就開始執行

componentDidMount

方法。

DOM

元素（React Native的原生元素）可以在這個方法裡取到。這時可以在這個方法裡執行資料擷取等操作。如果需要的話，任何的DOM操作都可以在這裡執行，絕對不可以在

render

方法裡執行。

State改變引發的繪制

State

的修改會觸發一些列的方法：

更新state
√
√
√
√

shouldComponentUpdate

方法會在

render

方法調用之前調用。在這個方法裡可以控制是否繪制元件，或者直接跳過。顯然，這個方法一定不會在初始化的時候調用。在這個方法裡需要傳回一個boolean類型的值，預設傳回

true

。

shouldComponentUpdate(nextProps, nextState) {
    return true
}

通過對

nextProps

和

nextState

的值的處理，可以判定接下來的重繪是否必要。

componentWillUpdate

方法在

shouldComponentUpdate

方法傳回true之後就會被調用。在和方法裡任何的

this.setState

方法調用都是不允許的，因為這個方法是用來為接下來的繪制做準備的，不是用來觸發重繪的。

componentDidUpdate

方法在

render

方法之後調用。和

componentDidMount

方法類似，這個方法裡也可以執行DOM操作。

componentWillUpdate(nextProps, nextState) {
    // 為接下來的繪制做準備
}

componentDidUpdate(prevProps, prevState) {
    // 
}

Props改變引發的繪制

任何對props對象的修改也會觸發生命周期方法的調用，這個過程和state的修改引發的生命周期方法基本一緻，隻是多了一個方法。

更新Props
√
√
√
√
√

componentWillRecieveProps

隻會在

props

對象發生改變并且不是初始繪制的時候調用。在這個方法裡，可以根據目前的

props

和将要傳入的

props

來設定

state

，但是這樣并不會觸發繪制。**這個方法裡有個很有趣的地方，在這個方法裡state的相等比較是無效的，因為state的改變不應該引起任何的props的改變。

componentWillReceiveProps(nextProps) {
    this.setState({
        // 設定state
    })
}

其他的生命周期基本上和改變state引起的生命周期方法是一樣的。

解除安裝

解除安裝
√

我們唯一沒有觸及的方法就是

componentWillUnmount

了。這個方法在元件被從DOM中移除之前調用。當你需要在元件移除前執行清理操作的時候非常有用。比如，清除

timer

之類的對象。

原文位址：http://busypeoples.github.io/post/react-component-lifecycle/

了解React元件的生命周期