摘要：因為是深入系列文章，本文不會仔細介紹每個生命周期方法的使用，而是會重點講解在使用組件生命周期時，經常遇到的疑問和錯誤使用方式。父組件發生更新導致的組件更新，生命周期方法的調用情況同上所述。

React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。

組件是構建React應用的基本單位，組件需要具備數據獲取、業務邏輯處理、以及UI呈現的能力，而這些能力是要依賴于組件不同的生命周期方法的。組件的生命周期分為3個階段：掛載階段、更新階段、卸載階段，每個階段都包含相應的生命周期方法。因為是深入系列文章，本文不會仔細介紹每個生命周期方法的使用，而是會重點講解在使用組件生命周期時，經常遇到的疑問和錯誤使用方式。

初學者在使用React時，常常不知道何時向服務器發送請求，獲取組件所需數據。對于組件所需的初始數據，最合適的地方，是在componentDidMount方法中，進行數據請求，這個時候，組件完成掛載，其代表的DOM已經掛載到頁面的DOM樹上，即使獲取到的數據需要直接操作DOM節點，這個時候也是絕對安全的。有些人還習慣在constructor或者componentWillMount中，進行數據請求，認為這樣可以更快的獲取到數據，但它們相比componentDidMount的執行時間，提前的時間實在是太微乎其微了。另外，當進行服務器渲染時（SSR)，componentWillMount是會被調用兩次的，一次在服務器端，一次在客戶端，這時候就會導致額外的請求發生。

組件進行數據請求的另一種場景：由父組件的更新導致組件的props發生變化，如果組件的數據請求依賴props，組件就需要重新進行數據請求。例如，新聞詳情組件NewsDetail，在獲取新聞詳情數據時，需要傳遞新聞的id作為參數給服務器端，當NewsDetail已經處于掛載狀態時，如果點擊其他新聞，NewsDetail的componentDidMount并不會重新調用，因而componentDidMount中進行新聞詳情數據請求的方法也不會再次執行。這時候，應該在componentWillReceiveProps中，進行數據請求：

componentWillReceiveProps(nextProps) {
  if(this.props.newId !== nextProps.newsId) {
    fetchNewsDetailById(nextProps.newsId)  // 根據最新的新聞id，請求新聞詳情數據
  }
}

如果進行數據請求的時機是由頁面上的交互行為觸發的，例如，點擊查詢按鈕后，查詢數據，這時只需要在查詢按鈕的事件監聽函數中，執行數據請求即可，這種情況一般是不會有疑問的。

組件的更新是組件生命周期中最復雜的階段，也是涉及到最多生命周期方法的階段。

正常情況下，當組件發生更新時，組件的生命周期方法的調用順序如下：

componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

// 組件收到新的props（props中的數據并不一定真正發生變化）-> 決定是否需要繼續執行更新過程 -> 組件代表的虛擬DOM即將更新 -> 組件重新計算出新的虛擬DOM -> 虛擬DOM對應的真實DOM更新到真實DOM樹中

父組件發生更新或組件自身調用setState，都會導致組件進行更新操作。父組件發生更新導致的組件更新，生命周期方法的調用情況同上所述。如果是組件自身調用setState，導致的組件更新，其生命周期方法的調用情況如下：

shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

可見，這種情況下componentWillReceiveProps并不會被調用。

當組件的shouldComponentUpdate返回false時，組件會停止更新過程，這時候生命周期方法的調用順序如下：

componentWillReceiveProps -> shouldComponentUpdate -> 結束

或（組件自身調用setState，導致的組件更新）：

shouldComponentUpdate -> 結束

組件的生命周期方法眾多，哪些方法中可以調用setState更新組件狀態？哪些方法中不可以呢？

可以的方法

componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate

這里有幾個注意點：

componentWillMount 中同步調用setState不會導致組件進行額外的渲染，組件經歷的生命周期方法依次是componentWillMount -> render -> componentDidMount，組件并不會因為componentWillMount中的setState調用再次進行更新操作。如果是異步調用setState，組件是會進行額外的更新操作。不過實際場景中很少在componentWillMount中調用setState，一般可以通過直接在constructor中定義state的方式代替。

一般情況下，當調用setState后，組件會執行一次更新過程，componentWillReceiveProps等更新階段的方法會再次被調用，但如果在componentWillReceiveProps中調用setState，并不會額外導致一次新的更新過程，也就是說，當前的更新過程結束后，componentWillReceiveProps等更新階段的方法不會再被調用一次。（注意，這里仍然指同步調用setState，如果是異步調用，則會導致組件再次進行渲染）

componentDidUpdate中調用setState要格外小心，在setState前必須有條件判斷，只有滿足了相應條件，才setState，否組組件會不斷執行更新過程，進入死循環。因為setState會導致新一次的組件更新，組件更新完成后，componentDidUpdate被調用，又繼續setState，死循環就產生了。

不可以的方法

其他生命周期方法都不能調用setState，主要原因有兩個：

產生死循環。例如，shouldComponentUpdate、componentWillUpdate 和 render 中調用setState，組件本次的更新還沒有執行完成，又會進入新一輪的更新，導致不斷循環更新，進入死循環。

無意義。componentWillUnmount 調用時，組件即將被卸載，setState是為了更新組件，在一個即將卸載的組件上更新state顯然是無意義的。實際上，在componentWillUnmount中調用setState也是會拋出異常的。

先看下面的一個例子：

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      bgColor: "red"
    }
  }

  render() {
    var {bgColor} = this.state
    return (
      
 
        Test
      
    );
  }
  
  componentDidMount() {
    this.setState({
      bgColor: "yellow"
    })
  }
}

當我們觀察瀏覽器渲染出的頁面時，頁面中Test所在div的背景色，是先顯示紅色，再變成黃色呢？還是直接就顯示為黃色呢？

答案是：直接就顯示為黃色！

這個過程中，組件的生命周期方法被調用的順序如下：

constructor -> componentWillMount -> render -> componentDidMount -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

組件在掛載完成后，因為setState的調用，將立即執行一次更新過程。雖然render方法被調用了兩次，但這并不會導致瀏覽器界面更新兩次，實際上，兩次DOM的修改會合并成一次瀏覽器界面的更新。React官網介紹componentDidMount方法時也有以下說明：

Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.

這說明，組件render的次數 不一定等于 瀏覽器界面更新次數。雖然JS的執行和DOM的渲染分別由瀏覽器不同的線程完成，但JS的執行會阻塞DOM的渲染，而上面的兩次render是在一個JS事件周期內執行的，所以在兩次render結束前，瀏覽器不會更新界面。

React 深入系列5：事件處理

我的新書《React進階之路》已上市，請大家多多支持！
鏈接：京東 當當