（一）、圖解
基本總結：
從圖看：在React Native中，組件的生命周期大致可以分為3個階段（實例化階段，存在階段，銷毀階段），其中最常接觸的為實例化階段，這個階段負責組件的構建和展示的時間，需要我們根據(jù)幾個函數(shù)的調用過程，控制好組件的展示和邏輯處理。
1、實例化階段函數(shù)功能分析
① getDefaultProps：在組件中，我們可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后，再次使用該組件不會調用getDefaultProps函數(shù)，所以組件自己不可以修改props，只可由其他組件調用它時再外部進行修改。
② getInitialState：該函數(shù)用于對組件一些狀態(tài)進行初始化
該函數(shù)不同于getDefaultProps,在以后的過程中，會再次調用，所以可以將控制控件狀態(tài)的一些變量放在這里初始化，比如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值。注意：一旦調用了this.setState方法，組件一定會調用render方法，對組件進行再次渲染，不過，React框架會根據(jù)DOM的狀態(tài)自動判斷是否需要真正渲染
constructor(props) {
super(props);
this.state = {
clickText: "開始點擊按鈕",
count: 1,
detailContent: true
}
}
...
clickButton(){
const { count } = this.state;
this.setState({
clickText: "我點擊了按鈕",
count: count + 1,
detailContent: false
})
}
render() {
console.log("render1111");
return (
<View style={styles.container}>
<Text>歡迎來到首頁</Text>
<TouchableOpacity
onPress={() => Actions.notice()}
>
<Text>跳轉到公告頁</Text>
</TouchableOpacity>
<Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
<TouchableOpacity
style={styles.button}
onPress={() => this.clickButton()}
>
<Text>{this.state.clickText}</Text>
</TouchableOpacity>
<HomeDetails detailContent={this.state.detailContent}/>
</View>
)
}
③ componentWillMount： 組件將要被加載到視圖之前調用
④ componentDidMount: 在調用了render方法，組件加載成功并被成功渲染出來之后，所要執(zhí)行的后續(xù)操作，一般都會在這個函數(shù)中進行，比如經(jīng)常要面對的網(wǎng)絡請求等加載數(shù)據(jù)操作
*** 因為UI已經(jīng)成功渲染，而且這里面是異步的，所以放在這個函數(shù)進行數(shù)據(jù)的請求等復雜的操作，不會出現(xiàn)UI錯誤***
2、存在階段函數(shù)功能分析
shouldComponentUpdate:一般用于優(yōu)化，可以返回false或true來控制是否進行渲染(true 的話進行下2步操作，false不會進行下去)
componentWillUpdate: 組件刷新前調用
componentDidUpdate：更新后
shouldComponentUpdate(nextProps, nextState){
console.log(this.state.detailContent,'detailContent');
if (this.state.count !== nextState.count) {
console.log("shouldComponentUpdate1111---組件需要更新");
return true;
}
return false;
}
componentWillUpdate(){
console.log("componentWillUpdate1111---組件將要更新");
}
componentDidUpdate(){
console.log("componentDidUpdate1111---組件更新完畢");
}
componentWillReceiveProps:指父元素對組件的props或state進行了修改
// 在子組件中對父元素props或state的改變進行監(jiān)聽進行相應的操作
componentWillReceiveProps(nextProps){
console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
}
// componentWillReceiveProps -> 改變后執(zhí)行父組件中 shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate
3、銷毀階段函數(shù)功能分析
componentWillUnmount
用于清理一些無用的內容，比如：定時器清除
常用知識點分析:
this.state:開發(fā)中，組件肯定要與用戶進行交互，React的一大創(chuàng)新就是將組件看成了一個狀態(tài)機，一開始有一個初始狀態(tài)，然后用戶交互，導致狀態(tài)變化，從而觸發(fā)重新渲染UI
1、當用戶點擊組件，導致狀態(tài)變化，this.setSate方法就修改狀態(tài)值，每次修改以后，會自動調用this.render方法，再次渲染組件
2、可以把組件看成一個狀態(tài)機，根據(jù)不同的status有不同的UI展示，只要使用setState改變狀態(tài)值，根據(jù)diff算法算出有差值后，就會執(zhí)行ReactDom的render方法，重新渲染界面
3、由于this.props和this.state都用于描述組件的特性，可能會產(chǎn)生混淆，一個簡單的區(qū)分方法就是---this.props表示那些一旦定義，就不再更改的特性，而this.state是會隨著用戶交互而產(chǎn)生改變的特性
獲取真實的Dom節(jié)點:
1、在React Native中，組件并不是真實的DOM節(jié)點，而是存在于內存中的一種數(shù)據(jù)結構，叫虛擬DOM
2、只有當它插入文檔后，才會變成真實的DOM
3、根據(jù)React的設計，所有DOM變動，都現(xiàn)在虛擬DOM上發(fā)生，然后再將實際發(fā)生變動的部分，反映在真實DOM上，這種算法叫做DOM diff，它可以極大提高網(wǎng)頁的性能表現(xiàn)。
4、有時需要從組建獲取真實DOM節(jié)點，這時就需要到ref屬性
