一、看圖分析
在下圖中描述了React Native中組件的生命周期，我們可以根據(jù)其中的執(zhí)行順序在對(duì)應(yīng)的函數(shù)中做對(duì)應(yīng)的操作
React Native組件的生命周期大致上可以劃分為實(shí)例化階段、存在階段和銷(xiāo)毀階段，其中最常用的為實(shí)例化階段，該階段就是組件的構(gòu)建、展示時(shí)期，需要我們根據(jù)幾個(gè)函數(shù)的調(diào)用過(guò)程，控制好組件的展示和邏輯的處理。
二、實(shí)例化階段函數(shù)功能分析
- getDefaultProps
該函數(shù)用于初始化一些默認(rèn)的屬性，通常會(huì)將固定的內(nèi)容放在這個(gè)函數(shù) 中進(jìn)行初始化和賦值；
在組件中，可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后，再次使用該組件不會(huì)調(diào)用getDefaultProps函數(shù)，所以組件自己不可以自己修改props（即：props可認(rèn)為是只讀的），只可由其他組件調(diào)用它時(shí)在外部修改。
- getInitialState
該函數(shù)是用于對(duì)組件的一些狀態(tài)進(jìn)行初始化；
由于該函數(shù)不同于getDefaultProps，在以后的過(guò)程中，會(huì)再次調(diào)用，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字，可以通過(guò)this.state來(lái)獲取值，通過(guò)this.setState來(lái)修改**statev值， 比如：
this.setState({
activePage: activePage,
currentX: contentOffSetX
});
注意：一旦調(diào)用了this.setState方法，組件一定會(huì)調(diào)用render方法，對(duì)組件進(jìn)行再次的渲染，不過(guò)，如果React框架會(huì)自動(dòng)根據(jù)DOM的狀態(tài)來(lái)判斷是否需要真正的渲染。
- componentWillMount
相當(dāng)于OC中的ViewWillAppear方法，在組件將要被加載在視圖上之前調(diào)用，功能相對(duì)較少。
- render
render是一個(gè)組件中必須有的方法，本質(zhì)上是一個(gè)函數(shù)，并返回JSX或其他組件來(lái)構(gòu)成DOM，和Android的XML布局類(lèi)似，注意：只能返回一個(gè)頂級(jí)元素 ;
此外，在render函數(shù)中，只可通過(guò)this.state和this.props來(lái)訪(fǎng)問(wèn)在之前函數(shù)中初始化的數(shù)據(jù)值 。
- componentDidMount
在調(diào)用了render方法后，組件加載成功并被成功渲染出來(lái)以后，所要執(zhí)行的后續(xù)操作，一般會(huì)在這個(gè)函數(shù)中處理網(wǎng)絡(luò)請(qǐng)求等加載數(shù)據(jù)的操作；
因?yàn)閁I已經(jīng)成功被渲染出來(lái)， 所以放在這個(gè)函數(shù)里進(jìn)行請(qǐng)求操作，不會(huì)出現(xiàn)UI上的錯(cuò)誤。
下圖是利用了fetch API來(lái)異步請(qǐng)求Web API來(lái)加載數(shù)據(jù)：
三、存在期階段函數(shù)功能分析
- componentWillReceiveProps：指父元素對(duì)組件的props或state進(jìn)行了修改
- shouldComponentUpdate：一般用于優(yōu)化，可以返回false或true來(lái)控制是否進(jìn)行渲染
- componentWillUpdate：組件刷新前調(diào)用，類(lèi)似componentWillMount
- componentDidUpdate：更新后的hook
四、銷(xiāo)毀期階段函數(shù)功能分析
用于清理一些無(wú)用的內(nèi)容，如：點(diǎn)擊事件Listener，只有一個(gè)過(guò)程：componentWillUnmount
五、常用知識(shí)點(diǎn)分析
- this.state
開(kāi)發(fā)中組件免不了要與用戶(hù)互動(dòng)，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開(kāi)始有一個(gè)初始狀態(tài)，然后用戶(hù)互動(dòng)，導(dǎo)致?tīng)顟B(tài)變化，從而觸發(fā)重新渲染 UI。
舉個(gè)例子：
當(dāng)用戶(hù)點(diǎn)擊組件，導(dǎo)致?tīng)顟B(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用 **this.render **方法，再次渲染組件。
可以把組件看成一個(gè)“狀態(tài)機(jī)”. 根據(jù)不同的status有不同的UI展示。只要使用setState改變狀態(tài)值，根據(jù)diff算法算出來(lái)有差以后，就會(huì)執(zhí)行ReactDom的render方法，重新渲染頁(yè)面。
注意：由于 this.props 和 this.state 都用于描述組件的特性，可能會(huì)產(chǎn)生混淆。一個(gè)簡(jiǎn)單的區(qū)分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會(huì)隨著用戶(hù)互動(dòng)而產(chǎn)生變化的特性。
五、ES5和ES6的差異化？
es5，es6 都是對(duì) ecmascript規(guī)范的補(bǔ)充，es5已經(jīng)大規(guī)模使用了，es6目前可能在個(gè)別平臺(tái)存在瀏覽器兼容性問(wèn)題。
- 區(qū)別1：創(chuàng)建組件
組件是一個(gè)自定義的js對(duì)象，在es5中使用React.createClass()；在es6中必須繼承React.component，然后進(jìn)行創(chuàng)建。
- ES5的寫(xiě)法：
var Demo1 = react.createClass({//類(lèi)名一定要大寫(xiě)開(kāi)頭
render(){
return(
<View style={styles.container}>
<Text>你好,朋友!</Text>
</View>
);
}
});
- ES6的寫(xiě)法：
class Demo2 extends Component {
render(){
return(
<View style={styles.container}>
<Text>你好,朋友!</Text>
</View>
);
}
}
- 區(qū)別2：組件的屬性props
在ES6中，其為屬性：defaultProps(可以標(biāo)識(shí)static定義在class內(nèi)，也可以定義在class外)，而在ES5中，其為方法：
getDefaultProps: function(){return {name:value}};
- ES5的寫(xiě)法：
var Demo3 = React.createClass({
getDefaultProps(){
return {title:'ES5的寫(xiě)法'}
},
propTypes: {
//屬性校驗(yàn)器，表示必須是string
title:React.PropTypes.string
},
render: function() {
return <Text>{this.props.title}</Text>;
}
});
- ES6的寫(xiě)法：
class Demo4 extends Component {
//不能在組件定義的時(shí)候定義一個(gè)屬性
render() {//開(kāi)頭花括號(hào)一定要和小括號(hào)隔一個(gè)空格，否則識(shí)別不出來(lái)
return <Text>{this.props.title}</Text>;
}
}
Demo4.propTypes: {
//屬性校驗(yàn)器，表示必須是bool，否則報(bào)錯(cuò)
title:React.propTypes.bool
};
Demo4.defaultProps={title:'111'};
-
區(qū)別3：組件的狀態(tài)state
- ES5的寫(xiě)法：
var Demo5 = React.createClass({
getInitialState(){
return {liked:false}
}
});
- ES6的寫(xiě)法：
class Demo6 extends component {
//構(gòu)造
constructor(props) {
super(props);
//初始狀態(tài)
this.state = {liked:false};
}
}
