React Native 學習筆記（二）組件生命週期函數

RN組件的生命週期

組件的生命週期就是指組件初始化並掛載到虛擬DOM爲起始，到組件從虛擬DOM卸載爲終結。 生命週期的方法就是組件在虛擬DOM中不一樣狀態的描述。 分爲三個階段：掛載，更新，卸載。

掛載

掛載指的是組件的實例被建立並插入到DOM中，掛載會調用如下方法。

constructor

constructor是RN組件的構造方法，須要在構造方法中最早調用super(props)。若是不須要初始化state，則不須要構造方法。

componentWillMount

componentWillMount在掛載以前被當即調用，在render方法以前被執行。所以在componentWillMount方法中設置state並不會致使從新被渲染。它只會執行一次，在一般狀況下，建議使用constuctor方法替代它。

render

該方法是必須的，一旦調用，則會去檢查this.props和this.state的數據並返回一個React元素。render方法中不該該去修改組件的props和state。render在更新階段也會被調用，前提是shouldComponentUpdate返回true。

componentDidMount

componentDidMount方法在組件被掛載以後被當即調用，在render方法執行完後執行。開發者能夠在這個方法中獲取其中的元素和其子組件。子組件的componentDidMount會在父組件的componentDidMount方法以前被調用。 若是須要從網絡上加載數據，能夠在這裏進行網絡請求。 在componentDidMount中設置state將會被從新渲染。(能夠更改state的地方)

更新

改變props和state都會致使組件更新，當一個組件被從新渲染時，會調用以下方法：

componentWillReceiveProps

componentWillReceiveProps會在掛載的組件收到新的props時被調用，它接收一個Object類型的參數-nextProps，表示新的props。一般在這個方法中監聽新的props值，並根據props的變化，經過調用this.setState()來更新組件state，this.setState()不會觸發render方法的調用。 在掛載的過程當中，初始的props不會觸發調用componentWillReceiveProps，這個方法只會在組件中的props更新時調用，另外調用this.setState()也不會觸發該方法。

shouldComponentUpdate

當組件接收到新的state和props時，shouldComponentUpdate被調用。接收兩個Object類型的參數，nextProps是新的props，nextState是新的state。 shouldComponentUpdate方法默認返回true，保證數據變化時，組件可以從新渲染。你也能夠重載這個方法，經過檢查變化先後props，來決定組件是否從新渲染 若是返回false，則組件不會被從新渲染，也不會調用本方法後面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

若是組件的props或者state發生改變，而且此前的shouldComponentUpdate返回true，則會調用該方法。componentWillUpdate會在組件從新被渲染以前被調用。所以能夠在這個方法中爲從新渲染作一些準備工做。須要注意的是，在這個方法中，不能使用this.setState()來更改state。若是須要根據props更改state，請在componentWillReceiveProps方法中去實現。

componentDidUpdate

組件從新渲染完成後會調用componentDidUpdate方法。兩個參數分別是渲染前的props和渲染前的state。這個方法也適合寫網絡請求，好比能夠將當前的props和prevProps進行對比，發生變化則請求網絡。

卸載

卸載就是從DOM中刪除組件，會調用以下方法

componentWillUnmount

componentWillUnmount方法在組件卸載和銷燬以前被當即調用。能夠在這個方法中執行必要的清理工做，如關掉定時器，取消網絡請求，清除組件裝載中建立的DOM元素等。

參考連接

React Native組件（一）組件的生命週期 | 劉望舒的博客