前言

React Native中元件的生命週期，也就是React.js中Component的生命週期。
英文官方文件：React.Component
類比Android中activity和fragment，瞭解其生命週期對於我們掌握一個元件從建立到銷燬的整個完整的過程和優化邏輯有很大的幫助。

圖解

首先來一張經典的生命週期的圖：

（圖片來自這裡）
在圖中可以看出大概分為3個階段：

首先getDefaultProps是建立前的準備工作，來設定預設props的值，所以嚴格地來說，這不是元件的生命週期的一部分。需要注意的是如果有從父元件傳過來的同名的props，那麼會覆蓋。還有就是多個例項間共享引用

static defaultProps = {
        name: 'mars',
        sex: 'boy',
        age: 10
};//設定預設屬性

import PropTypes from 'prop-types';

static propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
};//設定屬性的型別
 

①建立例項化階段
這個階段才是元件生命週期真正開始的階段。主要有元件例項建立，初始化狀態，掛載渲染等過程。
在ES6中，初始化state放在了constructor建構函式中，而不再使用getInitialState，如：

constructor(props){
  super(props);
  this.state = {
    like:false
  };
}

②執行更新階段
這個階段主要是用來處理使用者互動事件，元件接收父元件props更新或者state改變，介面更新。這個階段是生命週期中最重要的階段，我們常在這一階段對元件進行優化，減少render，從而大大提高效能！
③銷燬階段
這一階段比較簡單，只有一個回撥函式，在元件銷燬

各個階段回撥函式

defaultProps就不再說了，基本上也就上邊說的那點內容，而且不算是生命週期的一部分！

建立例項化階段

constructor() （ES6）

建構函式，元件建立時呼叫，寫法就是上邊那種格式，super(props)一定要寫在第一行。然後使用：

this.state={
  xx:xx,
  xx:xx,
};

來初始化狀態！

componentWillMount()

該回調方法在元件掛載前呼叫！這個函式呼叫時機是在元件建立，並初始化了狀態之後，在第一次繪製 render() 之前。可以在這裡做一些業務初始化操作，也可以設定元件狀態。這個函式在整個生命週期中只被呼叫一次。

render()

在元件渲染的時候呼叫！只允許返回一個最外層容器元件。render函式儘量保持純淨，只渲染元件，不修改狀態，不執行副操作（比如計時器）。所以我們不要在render()函式裡邊做一些更改狀態或者與伺服器互動的操作！

componentDidMount()

在元件掛載之後呼叫！需要注意的是，RN 框架是先呼叫子元件的 componentDidMount()，然後呼叫父元件的函式。這個函式裡我們就可以與伺服器進行互動，進行網路請求載入資料的操作，或者與 JS 其他框架互動了，例如設定計時setTimeout。

執行更新階段

componentWillReceiveProps(object nextProps)

該回調函式在接收到新的props時呼叫，一般是由父元件傳遞過來的！引數nextProps是接收的到新的props，當前舊的屬性還是可以通過 this.props 來獲取。在這個回撥函式裡面，你可以根據屬性的變化，通過呼叫 this.setState() 來更新你的元件狀態，這裡呼叫更新狀態是安全的，並不會觸發額外的 render() 呼叫。

shouldComponentUpdate(object nextProps, object nextState)

該函式返回一個布林值！由上圖中可以看出，在接收到父元件屬性，或者每次state更改的時候，都會呼叫該函式！
如果返回ture，則進行元件的重新渲染render，相反返回false，則不做任何處理！
預設情況下，這個函式永遠返回 true 用來保證資料變化的時候 UI 能夠同步更新。但是在某些特定條件下，我們可以過載這一方法根據傳遞過來的props和state來選擇是否更新，從而提高效能。

說到這裡，順便提一下PureComponent，我們知道最常見的一般extends Component來寫一個元件，如果我們知道這一元件不需要重繪或者其他改變的props或者state跟這個元件沒有關係的話，我們可以使用extends PureComponent來避免重繪！
因為PureComponent內部已經幫我們實現了shouldComponentUpdate()函式！
原始碼：

// 這個變數用來控制組件是否需要更新
var shouldUpdate = true;

// inst 是元件例項
if (inst.shouldComponentUpdate) {
  shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
  if (this._compositeType === CompositeType.PureClass) {
    // 用 shallowEqual 對比 props 和 state 的改動
    // 如果都沒改變就不用更新
    shouldUpdate =
      !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

需要注意的是shallowEqual()是淺比較，那麼涉及到一些物件，陣列的話，還是需要我們自己寫邏輯判斷的！

componentWillUpdate(object nextProps, object nextState)

shouldComponentUpdate返回true或者呼叫forceUpdate之後，就會開始準更新元件，並呼叫 componentWillUpdate()。
輸入引數與shouldComponentUpdate一樣，在這個回撥中，可以做一些在更新介面之前要做的事情。需要特別注意的是，在這個函式裡面，你就不能使用 this.setState 來修改狀態。這個函式呼叫之後，就會把 nextProps 和 nextState 分別設定到 this.props 和 this.state 中。緊接著這個函式，就會呼叫 render() 來更新介面了。

render()

跟初始化的時候一樣，渲染函式。

componentDidUpdate(object prevProps,object prevState)

元件更新渲染完成之後，就會呼叫改回調函式！因為到這裡已經完成了屬性和狀態的更新了，此函式的輸入引數變成了 prevProps 和 prevState。
同樣的，這裡也不能使用 this.setState 來修改狀態！

銷燬階段

componentWillUnmount()

元件被解除安裝的時候呼叫。一般在componentDidMount裡面註冊的事件需要在這裡刪除。比如定時器，監聽等！

更新方式

此部分內容來自：React元件生命週期小結，寫的很好，這裡學習記錄一下！
在react中，觸發render的有4條路徑。

以下假設shouldComponentUpdate都是按照預設返回true的方式。

• 首次渲染Initial Render
• 呼叫this.setState （並不是一次setState會觸發一次render，React可能會合並操作，再一次性進行render）
• 父元件發生更新（一般就是props發生改變，但是就算props沒有改變或者父子元件之間沒有資料交換也會觸發render）
• 呼叫this.forceUpdate()

注意，如果在shouldComponentUpdate裡面返回false可以提前退出更新路徑。

總結

對生命週期進行一個整體的回顧：

上邊的內容是在查閱一些資料文件部落格之後的一個學習總結，對自己瞭解元件生命週期有很大的幫助，也非常感謝這些前輩的指引！