react-native學習筆記之 生命週期

剛開始接觸RN時時一臉懵逼，由於之前沒怎麼搞過前端開發，所以看網上的例子和原始碼都是一頭霧水。iOS中有viewDidLoad(初始化介面)、viewWillAppear(佈局)、viewWillDisappear、viewDidAppear幾個狀態方便我們掌握程式的動向。

一個React Native元件的生命週期分為例項化、存在期和銷燬期，其中最常用的為例項化期，該時期即元件的構建、展示時期，需要開發者根據幾個函式的呼叫過程，控制好元件的展示和邏輯的處理。能為了更好理解好別人的程式碼和原始碼更近了一步

（1）例項化期分為5個階段，每個階段以一個函式來進行控制，具體如下：

getDefaultProps：顧名思義，這裡會初始化一些預設的屬性，通常會將固定的內容放在這個過程中進行初始化和賦值，一個控制元件可以利用this.props獲取在這裡初始化它的屬性，由於元件初始化後，再次使用該元件不會呼叫getDefaultProps函式，所以元件自己不可以自己修改props（即：props可認為是隻讀的），只可由其他元件呼叫它時在外部修改。所以無法呼叫

this.setProps({
     showText:'Hello world'
});

此函式呼叫在getInitialState：函式之前不過在ES6中已經不是當前的呼叫形式在ES6中如下呼叫

//ES6 這兩個屬性不能解除安裝class內

class CTestDemo extends Component{
  render()
  {return(
    <Text>{this.props.showText}</Text>
    );}
}
CTestDemo.propTypes={
//屬性校驗期，表示改屬性必須是bool，否則報錯
showText:React.PropTypes.bool
};
CTestDemo.defaultProps={//設定預設屬性
   showText:'Hello world'
};

getInitialState：這裡是對控制元件的一些狀態進行初始化，由於該函式不同於getDefaultProps，在以後的過程中，會再次呼叫，所以可以將控制控制元件的狀態的一些變數放在這裡初始化，如控制元件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值，修改方式如下：

getInitialState(){
  return{
   showText:'Hello world'      
 }
}
this.setState({
   showText:'Hello world'  
});

以上方法也是ES5的寫法，最新的ES6寫法有變更

 constructor(props){
  super(props);
  this.state={
   showText:'Hello world'  
  }
}

以上都是ES5和ES6的區別本質上都是一樣的，

componentWillMount：可以通過字面意思看出，這個方法被呼叫時期是元件將要被載入在檢視上之前，功能比較少，即：render一個元件前最後一次修改state的機會。相當於iOS中的viewWillAppear
render：上面已經說過render是一個元件必須有的方法，形式為一個函式，並返回JSX或其他元件來構成DOM，和Android的XML佈局、WPF的XAML佈局類似，只能返回一個頂級元素，即:值得注意的是，一旦呼叫了this.setState方法，控制元件必將呼叫render方法，對控制元件進行再次的渲染.不過，如果React框架會自動根據DOM的狀態來判斷是否需要真正的渲染

componentDidMount：即呼叫了render方法後，元件載入成功並被成功渲染出來以後所執行的hook函式，一般會將網路請求等載入資料的操作，放在這個函式裡進行，來保證不會出現UI上的錯誤，相當於ios中的viewDidAppear如圖所示，_fetchData利用了fetch API來非同步請求Web API來載入商品資料：

（2）存在期主要是用來處理與使用者的互動，如：點選事件，都比較簡單，也不是很常用，具體有以下幾個過程：
componentWillReceiveProps：指父元素對元件的props或state進行了修改
shouldComponentUpdate：一般用於優化，可以返回false或true來控制是否進行渲染
componentWillUpdate：元件重新整理前呼叫，類似componentWillMount
componentDidUpdate：更新後的hook
（3）銷燬期，用於清理一些無用的內容，如：點選事件Listener，只有一個過程：componentWillUnmount

3.總結

總得來講，React Native元件的生命週期，經歷了Mount->Update->Unmount這三個大的過程，即從建立到銷燬的過程，如果藉助iOS的開發思想，那麼React Native元件的生命週期就更容易理解了。那麼，我們構建一個React Native控制元件也就能夠知道如何下手，如何控制和優化。經過一層一層的封裝和呼叫，一個完整的React Native應用也就構建出來了。