一鞠值、如圖引几，該圖描述了React Native 組件的生命周期芭毙。
image.png
React Native組件的生命周期大致上可以劃分為實例化階段逃魄、存在階段和銷毀階段荤西，其中最常用的為實例化階段，該階段就是組件的構(gòu)建伍俘、展示時期邪锌，需要我們根據(jù)幾個函數(shù)的調(diào)用過程，控制好組件的展示和邏輯的處理癌瘾。
二觅丰、實例化階段函數(shù)功能分析
getDefaultProps
該函數(shù)用于初始化一些默認的屬性，通常會將固定的內(nèi)容放在這個函數(shù) 中進行初始化和賦值妨退；
在組件中妇萄，可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后咬荷，再次使用該組件不會調(diào)用getDefaultProps函數(shù)冠句，所以組件自己不可以自己修改props（即：props可認為是只讀的），只可由其他組件調(diào)用它時在外部修改幸乒。
getInitialState
該函數(shù)是用于對組件的一些狀態(tài)進行初始化懦底；
由于該函數(shù)不同于getDefaultProps，在以后的過程中罕扎，會再次調(diào)用基茵，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字壳影，可以通過this.state來獲取值拱层，通過this.setState來修改state值， 比如：
this.setState({
selectIndex: selectIndex,
currentY: contentOffSetY
});
注意：一旦調(diào)用了this.setState方法宴咧，組件一定會調(diào)用render方法根灯，對組件進行再次的渲染，不過掺栅，如果React框架會自動根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染烙肺。
componentWillMount
相當于OC中的ViewWillAppear方法，在組件將要被加載在視圖上之前調(diào)用氧卧，功能相對較少桃笙。
render
render是一個組件中必須有的方法，本質(zhì)上是一個函數(shù)沙绝，并返回JSX或其他組件來構(gòu)成DOM搏明，和Android的XML布局類似鼠锈，注意：只能返回一個頂級元素 ;
此外，在render函數(shù)中星著，只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值 购笆。
componentDidMount
在調(diào)用了render方法后，組件加載成功并被成功渲染出來以后虚循，所要執(zhí)行的后續(xù)操作同欠，一般會在這個函數(shù)中處理網(wǎng)絡(luò)請求等加載數(shù)據(jù)的操作；
因為UI已經(jīng)成功被渲染出來横缔， 所以放在這個函數(shù)里進行請求操作铺遂，不會出現(xiàn)UI上的錯誤。
下面的代碼是利用了fetch API來異步請求Web API來加載數(shù)據(jù)：
componentDidMount(){
this.loadData();
}
loadData(){
fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
三茎刚、存在期階段函數(shù)功能分析
componentWillReceiveProps
指父元素對組件的props或state進行了修改
shouldComponentUpdate
一般用于優(yōu)化娃循，可以返回false或true來控制是否進行渲染
componentWillUpdate
組件刷新前調(diào)用，類似componentWillMount
componentDidUpdate
更新后的hook
四斗蒋、銷毀期階段函數(shù)功能分析
用于清理一些無用的內(nèi)容捌斧，如：點擊事件Listener，只有一個過程：componentWillUnmount
五泉沾、常用知識點分析
5.1 this.state
開發(fā)中組件免不了要與用戶互動捞蚂，React 的一大創(chuàng)新，就是將組件看成是一個狀態(tài)機跷究，一開始有一個初始狀態(tài)姓迅，然后用戶互動，導(dǎo)致狀態(tài)變化俊马，從而觸發(fā)重新渲染 UI丁存。
舉個例子：
constructor(props) {
super(props);
this.isGoodeGuy = true;
this.state = {
content:'what a person are you ?'
};
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={()=>{
this.setState({content:this.isGoodeGuy?'好人':'爛人'})
}}>
<Text>{this.state.content}</Text>
</TouchableOpacity>
</View>
);
}
當用戶點擊組件，導(dǎo)致狀態(tài)變化柴我，this.setState 方法就修改狀態(tài)值解寝，每次修改以后，自動調(diào)用 this.render 方法艘儒，再次渲染組件聋伦。
可以把組件看成一個“狀態(tài)機”. 根據(jù)不同的status有不同的UI展示。只要使用setState改變狀態(tài)值界睁，根據(jù)diff算法算出來有差以后觉增，就會執(zhí)行ReactDom的render方法，重新渲染頁面翻斟。
注意：由于 this.props 和 this.state 都用于描述組件的特性逾礁，可能會產(chǎn)生混淆。一個簡單的區(qū)分方法是访惜，this.props 表示那些一旦定義嘹履，就不再改變的特性腻扇，而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性。